在引导程序中对同一元素使用两个数据切换

Question

我正在摆弄 Bootstrap，并创建了一个具有简单导航菜单的页面。我想为其中一个链接添加模式，该链接已经有一个

tooltip

。

我确实像这样将模态添加到

li

，

data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"

令人惊讶的是，它起作用了。这没有多大意义。因为至少有一个

data-toggle

必须被忽略。

我知道最好将其包装在具有

tooltip

的元素内。我的问题是，这是如何运作的？

Answer 1

它之所以有效，是因为 Bootstrap 数据属性使用单独的 jQuery 选择器来“激活”各个组件。

自从

$('[data-toggle="modal"]')

和

$('[data-toggle="tooltip"]')

都在Bootstrap JS代码中引用，模态和工具提示组件都在工作。

Answer 2

这适用于以下代码吗？汉堡菜单只会显示中间菜单链接，然后必须点击该链接才能显示完整的下拉菜单。我想要一个汉堡来使菜单标题和下拉菜单出现。

href 具有 data-toggle="dropdown" 并且按钮有 data-toggle="collapse"

无论我如何尝试，我都无法通过单击一个按钮来运行两者。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
<div class="navbar-header"><br />
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" style="color: white" href="#">MENU<span class="caret"></span></a>
<ul class="dropdown-menu">
    <li><a href="#">TITLE 1</a>
    <ul>
        <li><a href="#">Menu A</a></li>
        <li><a href="#">Menu B</a></li>
        <li><a href="#">Menu C</a></li>
        <li><a href="#">Menu D</a></li>
    </ul>
</li>
<li><a href="#">TITLE 2</a>
    <ul>
        <li><a href="#">Menu A</a></li>
        <li><a href="#">Menu B</a></li>
    </ul>
</li>
<li><a href="#">TITLE 3</a>
    <ul>
        <li><a href="#">Menu A</a></li>
        <li><a href="#">Menu B</a></li>
        <li><a href="#">Menu C</a></li>
        <li><a href="#">Menu D</a></li>
        </br>
    </ul>
</li>
</ul>
    </li>
  </ul>
    </li>
  </ul>
</div>
  </div>
</nav>