Question

我有基于树结构的菜单，默认情况下子列表已关闭，我只想显示li锚a有active类的列表块。

我尝试了一些事情，但我在针对正确的元素时做错了。

让我们说我想保持关于部分打开，因为它有子菜单，其中一个元素有active类 <li><a href="#" class='active'>Mission</a></li>

<h1>Click on Contact</h1>
<div class="page-left-bar">
  <ol id='expList'>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a>
      <ol>
        <li><a href="">Sub menu</a></li>
        <li><a href="#">Sub menu long name</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#">About </a>
      <ol>
        <li><a href="#" class='active'>Mission</a></li>
        <li><a href="#">Vision</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

小提琴链接https://jsfiddle.net/k2jqqbbk/1/

Answer 1

你可以把代码放在document.ready中，然后检查更新的jsfiddle ......

<强> HTML

<h1>Click on Contact</h1>
<div class="page-left-bar">
  <ol id='expList'>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a>
      <ol>
        <li><a href="">Sub menu</a></li>
        <li><a href="#">Sub menu long name</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#">About </a>
      <ol>
        <li><a href="#" class='active'>Mission</a></li>
        <li><a href="#">Vision</a></li>
        <li><a href="#">Sub menu</a></li>
        <li><a href="#">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

<强> JQUERY

$(document).ready(function(){




       $("#expList > li").click(function () {
            $(this).find("ol").slideToggle();
        });


$('#expList > li').children().has('.active').css('display', 'block');

});

Answer 2

在jQuery中尝试这个：

$('.active').closest('ol').css('display', 'block');

https://jsfiddle.net/k2jqqbbk/3/

如果其列表li中的任何一个具有活动类，则展开子菜单列表OL

2 个答案: