我的页面中有菜单列表，结构如下。当我单击菜单中的任何链接时，系统会自动将class =“is-active”添加到链接中。我将嵌套链接的显示设置为无，因此只有通过单击父链接才能看到它们（请参阅css）。但是，当我点击其中一个子链接时，子链接的整个子菜单都会消失。当我使用它们时，如何实现我的孩子链接？我知道我不能用css的孩子影响父母，也许有一些简单的javascript解决方法。
先感谢您！
.menu-item--expanded ul {display: none;}
.menu-item--expanded a.is-active ~ ul {display: block}<html>
<body>
<ul>
<li class="menu-item--expanded">
<a class="is-active">Link 1</a>
<ul>
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
<li><a href="">Link C</a></li>
</ul>
</li>
<li class="menu-item--expanded">
<a>Link 2</a>
<ul>
<li><a href="" class="is-active">Link D</a></li>
<li><a href="">Link E</a></li>
<li><a href="">Link F</a></li>
</ul>
</li>
</ul>
</body>
</html>我会在javascript上做这样的事情：
$('li').on('click', function(evt){
$(evt.target).parent().css('display', 'none');
})
因此，当单击列表项时，然后设置为display：none，父元素，所以ul。也许检查一下css的设置来检查is-active类，比如：
if($(evt.target).hasClass('is-active')){
//switch to display none
}
我建议使用jquery。以下代码将在单击父级时更改子级ul的显示。
确保子列表显示：none with css。
.menu-item--expanded > ul{
display: none;
}
$('.menu-item--expanded').click(function () {
$(this).find($('ul')).css({
'display' : 'block'
});
});
要确保只显示您所在父页面的子项，请使用以下代码：
注意：实际上不需要else子句，因为你的css已经在这些项目上设置了display none。但我提到它只是为了说清楚。
$('.menu-item--expanded').each(function () {
if($(this).find($('>a')).hasClass('is-active')){
$(this).find($('ul')).css({
'display' : 'block'
});
} else {
$(this).find($('ul')).css({
'display' : 'none'
});
}
});
希望这可以帮助。