jquery實現垂直手風琴導航欄
阿新 • • 發佈：2020-02-19
本文例項為大家分享了jquery實現垂直手風琴導航欄的具體程式碼，供大家參考，具體內容如下
- 做專案時第一次做垂直手風琴導航欄便記錄下來
- 使用jQuery更簡單
- 擴充套件瀏覽器支援本例採用jQuery1.12.4版
前端HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="middl"> <ul class="nav"> <li>一級選單 <ul class="sub"> <li>二級選單</li> </ul> </li> <li>一級選單 <ul class="sub"> <li>>二級選單</li> <li>>二級選單</li> </ul> </li> <li>一級選單 <ul class="sub"> <li>>二級選單</li> </ul> </li> </ul> </div> </body> </html>
CSS樣式:
.middl {
width: 100%;
height: auto;
background-color: #ADD8E6;
}
.nav {
list-style: none;
width: 100%;
}
.nav>li {
width: 100%;
height: auto;
font-size: 24px;
text-indent: 1em; /*縮排1個字元*/
position: relative;
background-color: #ADD8E6;
color: #f8f8ff;
cursor: pointer;
}
/*預設不顯示二級選單*/
.sub {
display: none;
}
.sub>li {
list-style: none; /*去掉小圓點*/
width: 100%;
height: 50px;
line-height: 50px;
font-size: 24px;
text-indent: 2em; /*縮排2個字元*/
background-color: #e6e6fa;
color: #000;
cursor: pointer; /*滑鼠手勢*/
}引入jQuery：
$(function () {
//點選展開當前二級選單
//1.監聽一級選單的點選事件
$(".nav>li").click(function () {
//1.1拿到二級選單
var $sub = $(this).children(".sub");
//1.2讓二級選單展開
$sub.slideDown(500);
//1.3拿到所有非當前的二級選單
//var otherSub = $(this).siblings().children(".sub");
////1.4讓所有非當前的二級選單收起
//otherSub.slideUp(500);
});
//雙擊關閉當前二級選單
$(".nav>li").dblclick(function () {
var $sub = $(this).children(".sub");
$sub.slideUp(500);
})
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。