如何扩展引导导航元素的所有父项？答案

【问题标题】：How do I expand all parents of a bootstrap nav element?如何扩展引导导航元素的所有父项？
【发布时间】：2019-03-13 02:36:38
【问题描述】：

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

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

在文档就绪时使用$(el).collapse("toggle") 扩展树中的第一级元素没有问题，但是当它应用于任何较低级别时，即使元素扩展，它也不可见，因为没有父元素在那个时候扩展点。

如何让展开元素的所有父元素也展开？

编辑：根据要求提供样本

所以，假设我希望在页面加载时扩展 menu1-1-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>

【问题讨论】：

$(el).parents(".collapse").collapse("toggle")
@B68C - 这是完美的！您能否将此作为答案，以便我将其标记为已接受。我将您的解决方案与我的代码中的目标元素链接在一起，即。 $(el).collapse("toggle").parents(".collapse").collapse("toggle")

标签： jquery twitter-bootstrap nav collapse expand

【解决方案1】：

你好，如果我正确理解你想要的是这样的：

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

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

【讨论】：

这将扩展每个树元素。我只需要将目标元素和任何直接父元素展开，回到根。