我这里有一个垂直菜单，它又有主要和次要子菜单。单击主要或辅助子菜单时，将关闭整个菜单。我希望子菜单在点击时保持打开状态。
例如：垂直菜单＆gt;首先是子菜单＆gt;第二个子菜单（单击），页面打开，菜单保持打开状态。
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('ul li ul').click(function () {
$('ul li ul li ul').slideUp();
});
$('ul li ul li ul').click(function (e) {
$("ul li ul li ul").slideUp();
$("ul li ul").slideUp();
e.stopPropagation();
});
});ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
<ul>
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
</ul>
</li>
<li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
<ul>
<li class="showSecond"><a href="#">Second<span class="sb-caret"></span></a>
<ul>
<li><a href="#">third</a>
</li>
<li><a href="#">third</a>
</li>
</ul>
</li>
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
</ul>
</li>
</ul>
答案 0 :(得分：0)
我不确定你是如何能够跟踪所有这些ul li ul...字符串的......但不要这样做。如果您的DOM稍有变化，或者您输错了某些内容，那么您可能会轻易犯错误。在标记中添加类，以便更容易遍历和引用元素。在这种情况下，<ul>每个级别的不同类会使事情变得更容易。
然后，您只需要选择崩溃的菜单和时间。您会注意到，唯一真正的变化是我用这些替换了您的ul li ul...点击处理程序：
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
该代码确保无论何时单击二级列表，所有三级列表都会崩溃。
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
此片段确保如果单击三级列表，则除此之外所有其他三级列表都会崩溃，并且所有二级列表将崩溃，除了此列表的父级。
请参阅下面的完整示例。
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
});ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
<ul class="tier-2">
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
</ul>
</li>
<li class="showFirst"><a href="#">First<span class="sb-caret"></span></a>
<ul class="tier-2">
<li class="showSecond"><a href="#">Second<span class="sb-caret"></span></a>
<ul class="tier-3">
<li><a href="#">third</a>
</li>
<li><a href="#">third</a>
</li>
</ul>
</li>
<li><a href="#">Second</a>
</li>
<li><a href="#">Second</a>
</li>
</ul>
</li>
</ul>