根据活动的URL展开子菜单

Question

我有一个带有子菜单的侧边栏列表。每个列表项都有一个指向不同页面的链接。我希望子菜单在2种情况下展开：

1. 当其父链接处于活动状态时，仅其子级应扩展。
2. 当特定列表的任何子级处于活动状态时， 扩展基于活动URL的列表的子菜单。

.menu-sidebar .child-ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul class="menu-sidebar">
  <li class="parent-li">
    <a href="A.html">A</a>
    <ul class="child-ul">
      <li><a href="../1.html">1</a></li>
      <li><a href="../2.html">2</a></li>
      <li><a href="3.html">3</a></li>
      <li><a href="../4.html">4</a></li>
      <li><a href="../5.html">5</a></li>
      <li><a href="../6.html">6</a></li>
    </ul>
  </li>
  <li class="parent-li">
    <a href="B.html">B</a>
    <ul class="child-ul">
      <li><a href="11.html">1</a></li>
      <li><a href="12.html">2</a></li>
      <li><a href="13.html">3</a></li>
      <li><a href="14.html">4</a></li>
      <li><a href="15.html">5</a></li>
      <li><a href="16.html">6</a></li>
      <li><a href="17.html">7</a></li>
      <li><a href="18.html">8</a></li>
      <li><a href="19.html">9</a></li>
      <li><a href="20.html">10</a></li>
      <li><a href="21.html">11</a></li>
    </ul>
  </li>
  <li class="parent-li">
    <a href="C.html">C</a>
    <ul class="child-ul">
      <li><a href="21.html">1</a></li>
      <li><a href="22.html">2</a></li>
      <li><a href="23.html">3</a></li>
      <li><a href="24.html">4</a></li>
      <li><a href="25.html">5</a></li>
      <li><a href="26.html">6</a></li>
      <li><a href="27.html">7</a></li>
      <li><a href="28.html">8</a></li>
      <li><a href="29.html">9</a></li>
    </ul>
  </li>
</ul>

菜单和子菜单的图像-

Answer 1

是否仅使用jQuery创建简单的点击功能？

$('li').click(function(e) {
  if ($(e.target).children("ul").length) {
    //toggle the class of child
  }
});

已经完成了一百万次，所以您应该能够找到切换类的代码