<p>Navigation link 1 <span class="toggle"></span></p>
<ul class="sub-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p>Navigation link 2 <span class="toggle"></span></p>
<ul class="sub-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p>Navigation link 3 <span class="toggle"></span></p>
<ul class="sub-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<p>Navigation link 4 <span class="toggle"></span></p>
<ul class="sub-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
.sub-menu {
display: none;
}
span.toggle {
display: inline-block;
width: 30px;
height: 42px;
position: absolute;
z-index: 1;
top: 7px;
right: 35px;
line-height: 42px;
font-size: 1.5em;
text-align: center;
cursor: pointer;
}
span.toggle::before {
content: "+";
}
span.toggle.on::before {
content: "-";
}
jQuery(document).ready(function() {
jQuery( ".toggle" ).click(function() {
jQuery(this).toggleClass("on");
if(jQuery(".sub-menu").is(":visible")) {
jQuery(".sub-menu").css("display", "none");
} else {
jQuery(this).next().css("display", "block");
}
});
});
在页面上,您可以看到
导航1 导航2 导航3 导航4
点击每个导航元素旁边的切换,即可显示.sub-menu。如果再次按下切换按钮,则会使.sub-menu消失。
问题#1 如果一个.sub菜单已经可见,通过点击另一个切换使第一个切换消失,但它不会触发预期的.sub菜单。
问题#2 如果一个.sub菜单已经可见,通过点击另一个切换按钮,不会将第一个更改为&#34; - &#34;到&#34; +&#34;。
我有什么想法可以解决这个问题吗?
谢谢。
答案 0 :(得分:3)
您的代码正在按预期工作,IMO。你说的是:
“当我点击一个带有'切换'类的元素时,切换是否 clicked元素具有“on”类。
现在,如果任何带有“子菜单”类的元素可见,则隐藏 那。否则(如果没有任何带有“子菜单”类的元素可见) ...显示下一个元素。
尝试:
$( ".toggle" ).click(function() {
var $self = $(this);
var $nextUl = $self.parent().next();
$('.toggle').not($self).removeClass("on");
$(".sub-menu").not($nextUl).hide();
$self.toggleClass("on");
$self.parent().next().toggle();
});
另请注意,您点击<span>
内的<p>
,因此.next()会找到<p>
中的下一个元素。在调用.parent()
之前,您需要向上移动一级(使用.next()
)。
检查工作jsFiddle。