JavaScript實(shí)現(xiàn)簡單的樹形菜單效果
更新時間：2017年06月23日 09:59:00 作者：斯丟皮德曼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的樹形菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
簡單的一個樹形菜單，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樹形菜單</title>
<style>
body {
font: 12px/20px 宋體;
}
img {
vertical-align: center;
border: none;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
</style>
<script>
function onclickfclose(id) {
var ul = document.getElementById(id);
var objv = ul.style.display;
if (objv == 'none') {
ul.style.display = 'block'
} else {
ul.style.display = 'none';
}
}
</script>
</head>
<body>
<b><img src="images/fold.gif" alt="">樹形菜單</b>
<ul>
<a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt="">文學(xué)藝術(shù)</a>
</ul>
<ul id="art" style="display: none;">
<li><img src="images/doc.gif" alt="">著名小說</li>
<li><img src="images/doc.gif" alt="">著名小說</li>
<li><img src="images/doc.gif" alt="">著名小說</li>
<li><img src="images/doc.gif" alt="">著名小說</li>
</ul>
<ul>
<a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房產(chǎn)論壇</a>
</ul>
<ul id="fangc" style="display: none;>
<li><img src=" images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
<li><img src="images/doc.gif" alt="">房產(chǎn)推銷</li>
</ul>
<ul>
<a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提圖專區(qū)</a>
</ul>
<ul id="tuhua" style="display: none;>
<li><img src=" images
/doc.gif" alt="">風(fēng)景圖畫</li>
<li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li>
<li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li>
<li><img src="images/doc.gif" alt="">風(fēng)景圖畫</li>
</ul>
<ul>
<a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娛樂八卦</a>
</ul>
<ul id="bagua" style="display: none;>
<li><img src=" images
/doc.gif" alt="">明星采訪</li>
<li><img src="images/doc.gif" alt="">明星采訪</li>
<li><img src="images/doc.gif" alt="">明星采訪</li>
<li><img src="images/doc.gif" alt="">明星采訪</li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
echarts實(shí)現(xiàn)排名柱狀圖的示例代碼
在ECharts中,可以通過設(shè)置數(shù)據(jù)的順序來控制柱狀圖的排序,本文就介紹了echarts實(shí)現(xiàn)排名柱狀圖的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Javascript前端事件循環(huán)機(jī)制詳細(xì)講解
單線程的同步等待極大影響效率，任務(wù)不得不一個一個等待執(zhí)行，對于網(wǎng)頁應(yīng)用是無法接受的。所以Javascript使用事件循環(huán)機(jī)制來解決異步任務(wù)的問題。本文就來講講Javascript的事件循環(huán)機(jī)制，希望對你有所幫助2022-12-12
部分網(wǎng)站允許空白referer的防盜鏈圖片的js破解代碼
主要是有些網(wǎng)站的圖片調(diào)用是防盜鏈的但一般只是判斷referer是不是自己網(wǎng)站，如果referer為空也會顯示圖片，所以有了下面的代碼。2011-05-05
微信小程序?qū)崿F(xiàn)購物車選擇規(guī)格顏色效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購物車選擇規(guī)格顏色選中效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
javascript實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家?guī)硪黄P(guān)于js中的鼠標(biāo)事件總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JS實(shí)現(xiàn)超級好看的鼠標(biāo)小尾巴特效
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)超級好看的鼠標(biāo)小尾巴特效的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
IE 下Enter提交表單存在重復(fù)提交問題的解決方法
這篇文章主要介紹了IE 下Enter提交表單存在重復(fù)提交問題的解決方法,需要的朋友可以參考下2014-05-05
JavaScript裝飾器函數(shù)(Decorator)實(shí)例詳解
這篇文章主要介紹了JavaScript裝飾器函數(shù)(Decorator),結(jié)合實(shí)例形式分析了JavaScript裝飾器函數(shù)(Decorator)的功能、實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2017-03-03
Javascript中，相信大家都試過用getElementsByTagName和childNodes來實(shí)現(xiàn)對節(jié)點(diǎn)的遍歷2011-10-10