jQuery问题切换多个元素
jQuery问题切换多个元素
提问于 2014-08-07 16:31:22
HTML
<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>CSS
.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: "-";
}JS
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
单击每个导航元素旁边的按钮，就会出现.子菜单。如果你再按下按钮，它会使.子菜单消失。
问题1如果一个.子菜单已经可见，单击另一个按钮会使第一个按钮消失，但它不会触发要出现的.子菜单。
如果一个.子菜单已经可见，则通过单击另一个按钮不会将第一个按钮从"-“更改为"+”。
我有什么办法解决这个问题吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-07 16:41:47
你的代码正在按预期工作，海事组织。你是说：
当我用类‘切换’单击一个元素时，切换单击的元素是否有"on“类。 现在，如果任何具有类“子菜单”的元素都是可见的，那么就隐藏它。否则(如果没有类“子菜单”可见的元素)，则为...show下一个元素。
尝试：
$( ".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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25187681
复制相关文章
相似问题
腾讯云开发者
