javascript伸縮菜單欄實現(xiàn)代碼分享
更新時間：2015年11月12日 09:58:18 作者：小平果118
這篇文章主要介紹了javascript伸縮菜單欄實現(xiàn)代碼，點擊標(biāo)題顯示下級菜單，節(jié)約了空間，使頁面排版更加緊湊，感興趣的小伙伴們可以參考一下
本文實現(xiàn)了點擊標(biāo)題時判斷該標(biāo)題下的菜單是否顯示，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來。具體代碼如下
<!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(){
// 將所有點擊的標(biāo)題和要顯示隱藏的列表取出來
var ps = document.getElementsByTagName("p");
var uls = document.getElementsByTagName("ul");
// 遍歷所有要點擊的標(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";
}
// 獲取點擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對應(yīng)的列表
}
// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
}
</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>后臺腳本</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>
實例效果：
以上就是為大家分享的javascript伸縮菜單欄實現(xiàn)代碼，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了Bootstrap復(fù)選框和單選按鈕美化插件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
self.attachevent is not a function的解決方法
今天一個客戶用chrome瀏覽器訪問網(wǎng)站，他的網(wǎng)站js提示self.attachevent is not a function，這個問題就是這個瀏覽器不支持attachevent，可以通過如下方法解決了，分享一下,需要的朋友可以參考下2017-04-04
基于js?+?html2canvas實現(xiàn)網(wǎng)頁放大鏡功能
最近接到任務(wù),需實現(xiàn)【網(wǎng)頁】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實現(xiàn),根本無法滿足我的需求,于是自己花了點時間調(diào)研實現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
這篇文章主要簡單介紹了Javascript數(shù)組與字典,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨avascript漢字拼音互轉(zhuǎn)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
大家仔細看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒有括號。2008-09-09
原來的腳本當(dāng)只有一張圖片時會彈出JavaScript腳本錯誤，特此將自己修改完的版本貼出。2009-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)登錄注冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要給大家介紹了關(guān)于如何使用js原生實現(xiàn)年份輪播選擇效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01