[英]toggleClass with multi-level navigation
現在,我正在嘗試像Microsoft.com一樣操作菜單。 我在切換鏈接中隱藏的無序列表時遇到問題。 如果您要在這里觀察,我會做一個本地提琴
這是HTML標記:
<nav class="multi-menu">
<ul>
<li>
<a href="#">Link</a>
<div class="sub-menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
這是CSS標記:
.multi-menu, .sub-menu {
background: #34495e;
}
.multi-menu li {
display: inline-block;
}
.multi-menu li a {
display: block;
padding: 20px 30px;
color: white;
text-decoration: none;
}
.sub-menu {
position: absolute;
display: inline-block;
width: 100%;
}
.sub-menu ul li {
display: block;
float: left;
width: 20%;
}
這是JQuery標記
$(document).ready(function(){
$(".multi-menu li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
var menu = $(".multi-menu li a.parent");
$(".parent").click(function (e){
e.preventDefault();
$(this).parent(".sub-menu ul").toggleClass('open');
});
});
首先,您可以刪除div
並將sub-menu
類直接添加到ul
元素中:
<li>
<a href="#">Link</a>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
然后在jQuery代碼中,使用siblings
或next
查找與單擊的父鏈接相關的子菜單:
$(".parent").on("click", function (e){
e.preventDefault();
$(this).siblings(".sub-menu").toggleClass('open');
});
對於動畫可見性效果,可以使用各種jQuery方法,例如:
$(this).siblings(".sub-menu").slideToggle();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.