javascript - 使用 JavaScript/jQuery 在页面加载后触发 Bootstrap 导航栏

Question

我使用的是 bootstrap 3.3.6 和 jQuery 1.11.3。我一直在努力触发 bootstrap's navbar使用纯 JavaScript/jQuery。

我的应用程序为我提供了以下数据结构。不幸的是，我没有能力改变它。我既不能添加类，也不能添加 ID，也不能添加任何其他内容。

    <ul>
      <li><a href="http://google.de">Stuff</a>
      <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">One more link</a></li>
      </ul></li>
      <li><a href="#">Mgmt Reports</a></li>
      <li><a href="#">Notices</a></li>
      <li><a href="#">Liens</a>
        <ul>
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a>
            <ul>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">A long sub menu</a>
                <ul>
                  <li><a href="#">Menu item 1</a></li>
                  <li><a href="#">Menu item 2</a></li>
                  <li><a href="#">Menu item 3</a></li>
                </ul>
              </li>
              <li><a href="#">Another link</a></li>
              <li><a href="#">One more link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

为了添加 Bootstrap 导航栏我已经做了什么:

1. 添加类 dropdown-menu所有 ul标签。我用了$("ul ul").addClass("dropdown-menu");实现这一目标。

2. 添加类 nav navbar-nav到最外层 ul标签。我用了$("ul:first").addClass("nav navbar-nav");实现这一目标。

3. 添加一个环绕 div与类 collapse navbar-collapse .这不是问题，因为我可以编辑周围的 HTML。

4. 正在添加 jQuery Smartmenus使多级导航栏正常工作。

类添加得很好(输出代码看起来不错)。这是有效的 jQuery 代码:

$("ul:first").addClass("nav navbar-nav");
$("ul ul").addClass("dropdown-menu");
$("ul:first").smartmenus({
    subIndicatorsText: '',
    subIndicatorsPos: 'append',
});
$(".sub-arrow").addClass("caret");

---

编辑

导航栏被触发。但是，它不等于手动添加相同 css 类的导航栏(在没有 JavaScript 的 HTML 中)。它没有相同的功能。

示例 1:普通的 Bootstrap 导航栏会阻止 TopMenu 元素在移动设备上被点击。 IE。第一次点击移动设备 <a href="http://google.com">Stuff</a>打开子菜单。第二次点击打开谷歌。当使用 JavaScript 添加类时，这似乎不起作用。

示例 2: 当我手动添加类时，子菜单打开到底部(下拉菜单)。当使用 jQuery 添加类时，子菜单会向右打开。输出代码看起来是一样的。

问题:我在这里错过了什么？如何在不触及 HTML 且不丢失功能的情况下使用纯 JavaScript 或 jQuery 触发 Bootstrap 导航栏？

Answer 1

不幸的是，我找不到使用 Bootstrap Collapse 创建“树控件”的方法。 Bootstrap Collapse 通常用于制作“ Accordion ”控件。理论上可以使用 panel-groups 并声明 data-parent 通过 Bootstrap 折叠创建“树控件”，但这与您提供的 HTML 不匹配说你不能编辑。

我找到的是 this ，这似乎非常有希望将不可编辑的 ul-struct 转换为工作树控件。我尝试制作一个可以动态更新您的结构并使其工作的脚本，但我没有太多运气。我不能花太多时间，但是 here is my work如果你想用它闲逛。我希望这会有所帮助。

此外，您提供的内容存在两个主要错误。第一，在 HTML 的第三行，前提是那里有 li 元素的结束标记。在 HTML 的后面有一个用于同一元素的结束标记，我想，您必须删除 HTML 第 3 行的结束标记，以便您的 li 可以封装以下 ul。我希望这是一个复制粘贴错误，并且您可以编辑这部分，因为这个错误会破坏您的元素。

此外，collapse 和 dropdown-menu 的 Bootstrap 指令似乎不能很好地协同工作。在我所有的测试中，如果我在一个元素上有一个有效的 collapse 并且我将类 dropdown-menu 添加到它，它不再监听 数据-切换。我建议从您的流程中删除 dropdown-menu 部分，这似乎是不必要的。