两级菜单和 adding/removing class
two levels menu and adding/removing class
我需要开发一个 two/three 级导航。当我点击任何主要项目时,所有的子项目都会出现。我需要我单击其子项的每个主要项目都只出现,并且在我推出子项的同时,class 已删除。
$(document).ready(function() {
$(".navigation__item").click(function() {
$(".navigation__dropdown").toggleClass("active");
});
});
<div class="main-nav">
<nav class="navigation-item">
<a>first item</a>
<div class="navigation__dropdown">
<ul>
<li>link1:1</li>
<li>link1:2</li>
<li>link1:3</li>
</ul>
</div>
</nav>
<nav class="navigation-item">
<a>second item</a>
<div class="navigation__dropdown">
<ul>
<li>link2:1</li>
<li>link2:2</li>
<li>link2:3</li>
</ul>
</div>
</nav>
<nav class="navigation-item">
<a>third item</a>
<div class="navigation__dropdown">
<ul>
<li>link3:1</li>
<li>link3:2</li>
<li>link3:3</li>
</ul>
</div>
</nav>
</div>
$(document).ready(function() {
$(".navigation-item").click(function() {
$(this).find(".navigation__dropdown").toggleClass("active");
});
});
Javascript
$(document).ready(function() {
$(".navigation-item a").click(function() {
$("div.navigation__dropdown").hide();
$(".navigation-item").removeClass("active");
$(this).parent().find("div.navigation__dropdown").toggle();
$(this).parent().toggleClass('active');
});
$(".navigation-item").on("mouseleave",function(){
$(this).find(".navigation__dropdown").hide();
$(this).removeClass("active");
});
$(".navigation-item").on("mouseover",function(){
$(this).find(".navigation__dropdown").show();
$(this).addClass("active");
});
});
CSS
.navigation__dropdown
{
display:none;
}
.active
{
background-color:lightyellow
}
.navigation-item a
{
cursor:pointer;
}
工作示例在这里JSFiddle
我需要开发一个 two/three 级导航。当我点击任何主要项目时,所有的子项目都会出现。我需要我单击其子项的每个主要项目都只出现,并且在我推出子项的同时,class 已删除。
$(document).ready(function() {
$(".navigation__item").click(function() {
$(".navigation__dropdown").toggleClass("active");
});
});
<div class="main-nav">
<nav class="navigation-item">
<a>first item</a>
<div class="navigation__dropdown">
<ul>
<li>link1:1</li>
<li>link1:2</li>
<li>link1:3</li>
</ul>
</div>
</nav>
<nav class="navigation-item">
<a>second item</a>
<div class="navigation__dropdown">
<ul>
<li>link2:1</li>
<li>link2:2</li>
<li>link2:3</li>
</ul>
</div>
</nav>
<nav class="navigation-item">
<a>third item</a>
<div class="navigation__dropdown">
<ul>
<li>link3:1</li>
<li>link3:2</li>
<li>link3:3</li>
</ul>
</div>
</nav>
</div>
$(document).ready(function() {
$(".navigation-item").click(function() {
$(this).find(".navigation__dropdown").toggleClass("active");
});
});
Javascript
$(document).ready(function() {
$(".navigation-item a").click(function() {
$("div.navigation__dropdown").hide();
$(".navigation-item").removeClass("active");
$(this).parent().find("div.navigation__dropdown").toggle();
$(this).parent().toggleClass('active');
});
$(".navigation-item").on("mouseleave",function(){
$(this).find(".navigation__dropdown").hide();
$(this).removeClass("active");
});
$(".navigation-item").on("mouseover",function(){
$(this).find(".navigation__dropdown").show();
$(this).addClass("active");
});
});
CSS
.navigation__dropdown
{
display:none;
}
.active
{
background-color:lightyellow
}
.navigation-item a
{
cursor:pointer;
}
工作示例在这里JSFiddle