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

Expand submenu list OL if any of the its list li has active class

本文关键字：列表 任何一 活动 菜单 OL 如果 li      更新时间：2023-09-26

我有基于树结构的菜单，默认情况下子列表是关闭的，我只想显示 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/

您可以通过将代码放在 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>

简讯

$(document).ready(function(){


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

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

在jQuery中试试这个：

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

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

相关文章：