Jquery 手风琴嵌套 link 使父级崩溃 link

Question

问题出在我们单击 E4 时。在显示它的子菜单 E4I 和 E4II 之前，E4 的父菜单 E 会自动关闭。

jQueryUI 是否支持嵌套手风琴？该设计主要是使用 Bootstrap 手风琴，但后来收到一个需求，要求动态生成 DOM 个元素。

$("ul#testJ").accordion({
  collapsible: true,
  active: false,
  heightStyle: "content",
  header: "a.header"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<ul id="testJ">
  <li>
    <a href="#"><i class="fa fa-home"></i> &nbsp;&nbsp;A</a>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;B</a>
    <ul>
      <li><a href="#">B1</a></li>
      <li><a href="#">B2</a></li>
      <li><a href="#">B3</a></li>
      <li><a href="#">B4</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-clipboard"></i> &nbsp;&nbsp;&nbsp;C</a>
    <ul>
      <li><a href="#">C1</a></li>
      <li><a href="#">C2</a></li>
      <li><a href="#">C3</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-box"></i> &nbsp;&nbsp;D</a>
    <ul>
      <li><a href="#">D1</a></li>
      <li><a href="#">D2</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-chart-pie"></i> &nbsp;&nbsp;E</a>
    <ul>
      <li><a href="#">E1</a></li>
      <li><a href="#">E2</a></li>
      <li><a href="#">E3</a></li>
      <li>
        <a class="header" href="#">E4</a>
        <ul>
          <li><a href="#">E4I</a></li>
          <li><a href="#">E4II</a></li>
        </ul>
      </li>
      <li><a href="#">E5</a></li>
      <li><a href="#">E6</a></li>
      <li><a href="#">E7</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-truck"></i> &nbsp;F</a>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-user"></i> &nbsp;&nbsp;G</a>
    <ul>
      <li><a href="#">G1</a></li>
      <li><a href="#">G2</a></li>
    </ul>
  </li>
</ul>

Answer 1

所以问题在于在嵌套手风琴上使用 header。我在 https://bugs.jqueryui.com/ticket/9020.

找到了这个解决方案

$("ul.testJ").accordion({
  collapsible: true,
  active: false,
  heightStyle: "content",
  header: "> li>a:not(.header)"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<ul class="testJ">
  <li>
    <a class="header" href="#"><i class="fa fa-home"></i> &nbsp;&nbsp;A</a>
  </li>
  <li>
    <a href="#"><i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;B</a>
    <ul>
      <li><a class="header" href="#">B1</a></li>
      <li><a class="header" href="#">B2</a></li>
      <li><a class="header" href="#">B3</a></li>
      <li><a class="header" href="#">B4</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-clipboard"></i> &nbsp;&nbsp;&nbsp;C</a>
    <ul>
      <li><a class="header" href="#">C1</a></li>
      <li><a class="header" href="#">C2</a></li>
      <li><a class="header" href="#">C3</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-box"></i> &nbsp;&nbsp;D</a>
    <ul>
      <li><a class="header" href="#">D1</a></li>
      <li><a class="header" href="#">D2</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-chart-pie"></i> &nbsp;&nbsp;E</a>
    <ul class="testJ">
      <li><a class="header" href="#">E1</a></li>
      <li><a class="header" href="#">E2</a></li>
      <li><a class="header" href="#">E3</a></li>
      <li>
        <a href="#">E4</a>
        <ul>
          <li><a class="header" href="#">E4I</a></li>
          <li><a class="header" href="#">E4II</a></li>
        </ul>
      </li>
      <li><a class="header" href="#">E5</a></li>
      <li><a class="header" href="#">E6</a></li>
      <li><a class="header" href="#">E7</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-truck"></i> &nbsp;F</a>
  </li>
  <li>
    <a href="#"><i class="fa fa-user"></i> &nbsp;&nbsp;G</a>
    <ul>
      <li><a class="header" href="#">G1</a></li>
      <li><a class="header" href="#">G2</a></li>
    </ul>
  </li>
</ul>

Jquery 手风琴嵌套 link 使父级崩溃 link

Jquery accordion nested link crashes the parent link

jquery

accordion

jquery-ui-accordion