具有嵌套链接的CSS / JavaScript / HTML菜单列表

Question

我的页面上具有以下结构的菜单列表。 当我单击菜单中的任何链接时，系统会自动将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>

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的显示。

确保显示子列表：没有带CSS的子列表。

.menu-item--expanded > ul{
display: none;
}

$('.menu-item--expanded').click(function () {
  $(this).find($('ul')).css({
    'display' : 'block'
  });
});

为确保只有可见的父页面的子代使用以下代码：

注意：实际上不需要else子句，因为您的CSS已经设置了在这些项目上不显示任何内容。 但我只是为了清楚起见提到了它。

$('.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 个解决方案

解决方案1
0 2018-03-19 13:18:57

解决方案2
0 2018-03-21 16:03:50

具有嵌套链接的CSS / JavaScript / HTML菜单列表

问题描述

2 个解决方案

解决方案1 0 2018-03-19 13:18:57

解决方案2 0 2018-03-21 16:03:50

解决方案1
0 2018-03-19 13:18:57

解决方案2
0 2018-03-21 16:03:50