javascript伸縮菜單欄實(shí)現(xiàn)代碼分享
更新時(shí)間：2015年11月12日 09:58:18 作者：小平果118
這篇文章主要介紹了javascript伸縮菜單欄實(shí)現(xiàn)代碼，點(diǎn)擊標(biāo)題顯示下級(jí)菜單，節(jié)約了空間，使頁(yè)面排版更加緊湊，感興趣的小伙伴們可以參考一下
本文實(shí)現(xiàn)了點(diǎn)擊標(biāo)題時(shí)判斷該標(biāo)題下的菜單是否顯示，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)。具體代碼如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;}
.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}
.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}
.menu div ul{display:none;}
.menu li{height:24px;
line-height:24px;
padding-left:5px;}
</style>
<script type="text/javascript">
window.onload=function(){
// 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái)
var ps = document.getElementsByTagName("p");
var uls = document.getElementsByTagName("ul");
// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
for(var i = 0, n = ps.length; i <n; i += 1){
ps[i].id = i;
ps[i].onclick = function(){
for(var j = 0; j < n ; j += 1){
uls[j].style.display = "none";
}
uls[this.id].style.display = "block";
}
// 獲取點(diǎn)擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對(duì)應(yīng)的列表
}
// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺(tái)腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
實(shí)例效果：
以上就是為大家分享的javascript伸縮菜單欄實(shí)現(xiàn)代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了Bootstrap復(fù)選框和單選按鈕美化插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
self.attachevent is not a function的解決方法
今天一個(gè)客戶用chrome瀏覽器訪問(wèn)網(wǎng)站，他的網(wǎng)站js提示self.attachevent is not a function，這個(gè)問(wèn)題就是這個(gè)瀏覽器不支持attachevent，可以通過(guò)如下方法解決了，分享一下,需要的朋友可以參考下2017-04-04
基于js?+?html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)放大鏡功能
最近接到任務(wù),需實(shí)現(xiàn)【網(wǎng)頁(yè)】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實(shí)現(xiàn),根本無(wú)法滿足我的需求,于是自己花了點(diǎn)時(shí)間調(diào)研實(shí)現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
這篇文章主要簡(jiǎn)單介紹了Javascript數(shù)組與字典,需要的朋友可以參考下2015-01-01
javascript漢字拼音互轉(zhuǎn)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript漢字拼音互轉(zhuǎn)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
大家仔細(xì)看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒(méi)有括號(hào)。2008-09-09
原來(lái)的腳本當(dāng)只有一張圖片時(shí)會(huì)彈出JavaScript腳本錯(cuò)誤，特此將自己修改完的版本貼出。2009-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)登錄注冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
使用js原生實(shí)現(xiàn)年份輪播選擇效果實(shí)例
這篇文章主要給大家介紹了關(guān)于如何使用js原生實(shí)現(xiàn)年份輪播選擇效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01