用JS實(shí)現(xiàn)一個(gè)TreeMenu效果分享
更新時(shí)間：2011年08月28日 18:53:54 作者：
用JS實(shí)現(xiàn)一個(gè)TreeMenu效果分享，思路比較簡(jiǎn)單，但很實(shí)用
今天學(xué)的一點(diǎn)小東西和大家分享一下。
類(lèi)似TreeMenu控件.
不廢話(huà)直接代碼：
<script language="javascript">
function control() {//定義函數(shù)
if (sMenus3.innerHTML == "+") {//判斷展開(kāi)狀態(tài)
ulMenu3.style.display = "block";//如果是“+”號(hào) 則可以展開(kāi)
sMenus3.innerText = "-";//展開(kāi)之后顯示為減號(hào)
}
else {
ulMenu3.style.display = "none";//如果為“-”號(hào) 則不能展開(kāi)
sMenus3.innerText = "+";//點(diǎn)擊之后符號(hào)變換。
}
}
</script>
Html 代碼：
//這段代碼沒(méi)什么說(shuō)的 主要就是Id 和js代碼中的Id對(duì)應(yīng)。
<body>
<span id="sMenus3" style=" border:1px solid #00000; color:Blue;cursor:hand ;" onclick="control()">-</span>無(wú)網(wǎng)站狀態(tài)<br/>
<ul id="ulMenu3">
<li><a target="_blank">百度</a> </li>
<li><a target="_parent">百度</a></li>
<li><a target="_blank">還是百度</a></li>
</ul>
</body>
類(lèi)似TreeMenu控件.
不廢話(huà)直接代碼：
復(fù)制代碼 代碼如下:
<script language="javascript">
function control() {//定義函數(shù)
if (sMenus3.innerHTML == "+") {//判斷展開(kāi)狀態(tài)
ulMenu3.style.display = "block";//如果是“+”號(hào) 則可以展開(kāi)
sMenus3.innerText = "-";//展開(kāi)之后顯示為減號(hào)
}
else {
ulMenu3.style.display = "none";//如果為“-”號(hào) 則不能展開(kāi)
sMenus3.innerText = "+";//點(diǎn)擊之后符號(hào)變換。
}
}
</script>
Html 代碼：
//這段代碼沒(méi)什么說(shuō)的 主要就是Id 和js代碼中的Id對(duì)應(yīng)。
復(fù)制代碼 代碼如下:
<body>
<span id="sMenus3" style=" border:1px solid #00000; color:Blue;cursor:hand ;" onclick="control()">-</span>無(wú)網(wǎng)站狀態(tài)<br/>
<ul id="ulMenu3">
<li><a target="_blank">百度</a> </li>
<li><a target="_parent">百度</a></li>
<li><a target="_blank">還是百度</a></li>
</ul>
</body>
相關(guān)文章
在元素間的文本就是通過(guò)對(duì)象.innerText，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2014-01-01
有時(shí)候我們需要獲取當(dāng)前網(wǎng)頁(yè)的網(wǎng)址，方便我們判斷，一般情況我們都是通過(guò)location.href來(lái)獲取2013-12-12
Javascript實(shí)例項(xiàng)目放大鏡特效的實(shí)現(xiàn)流程
商城網(wǎng)站包括APP端中把鼠標(biāo)光標(biāo)移動(dòng)到預(yù)覽圖上就會(huì)看到這部分商品圖片放大了，這就是JavaScript實(shí)現(xiàn)的放大鏡特效，今天我們也來(lái)實(shí)現(xiàn)一波2021-11-11
JavaScript程序中實(shí)現(xiàn)繼承特性的方式總結(jié)
JavaScript是一門(mén)強(qiáng)行聲稱(chēng)面向?qū)ο蟮恼Z(yǔ)言,而繼承是面向?qū)ο蟮囊淮笾饕匦?這里我們根據(jù)阮一峰老師的文章來(lái)看一下JavaScript程序中實(shí)現(xiàn)繼承特性的方式總結(jié)2016-06-06
這篇文章介紹了Js中的parseInt函數(shù)，有需要的朋友可以參考一下2013-07-07
javascript:void(0)的含義及用法實(shí)例
這篇文章介紹了javascript:void(0)的含義及用法實(shí)例，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12
深入學(xué)習(xí)JavaScript 高階函數(shù)
這篇文章主要介紹了深入學(xué)習(xí)JavaScript 高階函數(shù)，在 JavaScript 中，函數(shù)是一種特殊類(lèi)型的對(duì)象，它們是 Function objects。,需要的朋友可以參考下2019-06-06
javascript實(shí)現(xiàn)網(wǎng)頁(yè)屏蔽Backspace事件，輸入框不屏蔽
這篇文章主要介紹了如何實(shí)現(xiàn)網(wǎng)頁(yè)屏蔽Backspace事件而輸入框不屏蔽，需要的朋友可以參考下2015-07-07
鑒于有同學(xué)在學(xué)習(xí)的時(shí)候容易混肴，所以筆者還是將其加以區(qū)別,需要的朋友可以參考下2013-07-07
怎樣在JavaScript里寫(xiě)一個(gè)swing把數(shù)據(jù)插入數(shù)據(jù)庫(kù)
在JavaScript里寫(xiě)一個(gè)swing來(lái)實(shí)現(xiàn)確定取消，來(lái)決定是否執(zhí)行這個(gè)功能 控制把數(shù)據(jù)插入數(shù)據(jù)庫(kù),接下來(lái)介紹實(shí)現(xiàn)方法2012-12-12