Question

我的页面中有菜单列表，结构如下。当我点击菜单中的任何链接时，系统会自动添加class =＆＃34; is-active＆＃34;到链接。我将嵌套链接的 display 设置为 none ，这样只有点击父链接才能看到它们（请参阅css）。但是，当我点击其中一个子链接时，子链接的整个子菜单都会消失。当我使用它们时，如何实现我的孩子链接？我知道我不能用css的孩子影响父母，也许有一些简单的javascript解决方法。

提前谢谢！

＆＃13;

.menu-item--expanded ul {display: none;}
.menu-item--expanded a.is-active ~ ul {display: block}

＆＃13;

<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>

＆＃13;

Answer 1

我会在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
}

Answer 2

我建议使用jquery。以下代码将在单击父级时更改子级ul的显示。

确保子列表是display：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'
    });
  }
});

希望这会有所帮助。

包含嵌套链接的CSS / JavaScript / HTML菜单列表

2 个答案: