Jquery 如何展开引导导航元素的所有父元素？

我在侧边栏中有一个Bootstrap4NAV，它使用数据库中的动态内容，并像树一样显示。当通过单击元素来折叠和展开树中的各种元素时，它的工作方式与预期的一样

不过。我希望能够将树元素编码为url，以便在访问url和加载页面时，树元素显示为已展开

<nav>
  <ul>
    <li>
      <a href="#menu1" data-toggle="collapse" aria-expanded="false">Menu 1</a>
      <ul id="menu1" class="collapse">
        <li>
          <a href="#menu1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1</a>
          <ul id="menu1-1" class="collapse">
            <li>
              <a href="#menu1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1</a>
              <ul id="menu1-1-1" class="collapse">
                <li>
                  <a href="#menu1-1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1.1</a>
                  <ul id="menu1-1-1-1" class="collapse">
                    <li>Item a</li>
                    <li>Item b</li>
                  </ul>
                </li>
                <li>Item c</li>
                <li>Item d</li>
              </ul>
            </li>
            <li>Item e</li>
            <li>Item f</li>
          </ul>
        </li>
        <li>
          <a href="#menu1-2" data-toggle="collapse" aria-expanded="false">Menu 1.2</a>
          <ul id="menu1-2" class="collapse">
            </li>Item g</li>
            </li>Item h</li>
          </ul>
        </li>
        <li>Item i</li>
        <li>Item j</li>
      </ul>
    </li>
    <li>
      <a href="#menu2" data-toggle="collapse" aria-expanded="false">Menu 2</a>
      <ul id="menu2" class="collapse">
        <li>
          <a href="#menu2-1" data-toggle="collapse" aria-expanded="false">Menu 2.1</a>
          <ul id="menu2-1" class="collapse">
            <li>Item k</li>
            <li>Item l</li>
          </ul>
        </li>
        <li>Item m</li>
        <li>Item n</li>
      </ul>
    </li>
  </ul>
</nav>

树中的第一级元素可以在文档就绪时使用

$（el）.collapse（“toggle”）

展开，但当其应用于任何较低级别时，即使元素展开，也不可见，因为此时没有父元素展开

如何使展开元素的所有父元素也展开

编辑：根据要求编辑样本

因此，如果我想在页面加载时扩展

menu1-1-1

，这意味着

menu1-1-1

，

menu1-1

和

menu1

（树中#menu1-1-1-1的父项）都需要扩展

<nav>
  <ul>
    <li>
      <a href="#menu1" data-toggle="collapse" aria-expanded="false">Menu 1</a>
      <ul id="menu1" class="collapse">
        <li>
          <a href="#menu1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1</a>
          <ul id="menu1-1" class="collapse">
            <li>
              <a href="#menu1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1</a>
              <ul id="menu1-1-1" class="collapse">
                <li>
                  <a href="#menu1-1-1-1" data-toggle="collapse" aria-expanded="false">Menu 1.1.1.1</a>
                  <ul id="menu1-1-1-1" class="collapse">
                    <li>Item a</li>
                    <li>Item b</li>
                  </ul>
                </li>
                <li>Item c</li>
                <li>Item d</li>
              </ul>
            </li>
            <li>Item e</li>
            <li>Item f</li>
          </ul>
        </li>
        <li>
          <a href="#menu1-2" data-toggle="collapse" aria-expanded="false">Menu 1.2</a>
          <ul id="menu1-2" class="collapse">
            </li>Item g</li>
            </li>Item h</li>
          </ul>
        </li>
        <li>Item i</li>
        <li>Item j</li>
      </ul>
    </li>
    <li>
      <a href="#menu2" data-toggle="collapse" aria-expanded="false">Menu 2</a>
      <ul id="menu2" class="collapse">
        <li>
          <a href="#menu2-1" data-toggle="collapse" aria-expanded="false">Menu 2.1</a>
          <ul id="menu2-1" class="collapse">
            <li>Item k</li>
            <li>Item l</li>
          </ul>
        </li>
        <li>Item m</li>
        <li>Item n</li>
      </ul>
    </li>
  </ul>
</nav>

项目a
b项


项目c
项目d


项目e
项目f




第g项
项目h


项目一
项目j






项目k
项目l


项目m
项目n

您好，如果我正确理解您的需求，它是这样的：

$('#idtree .collapse').collapse('show');

---

你能给我们提供html和css或者一个小例子吗

这将扩展每个树元素。我只需要展开目标元素和任何直接父元素，回到根元素。$（el）.parents（“.collapse”）.collapse（“.collapse”）.collapse（“.toggle”）@B68C-这太完美了！你能把这个作为一个答案，这样我就可以把它标记为接受。我将您的解决方案与代码中的目标元素链接，即。

$（el）.collapse（“toggle”）.parents（“collapse”）.collapse（“toggle”）