Question

我在让这个Twitter Bootstrap Nav栏在JS Fiddle中工作时遇到了很多问题;我终于让它呈现出我想要的方式从我的下拉菜单中删除（在选项卡下＃34;社区＆＃34;） - 我不知道问题是什么。当我在文本编辑器中执行它时，我得到了它的功能，我的代码似乎完全相同，但在JS Fiddle（我需要它工作）时，当我按下按钮时，没有任何下降和放大我无法弄清楚为什么，我尝试过改变这么多东西 - 如果有人可以帮助或指导我为什么这不起作用，我会如此欣赏它（我试过了）将li更改为破坏了整个事物样式的div，我尝试将数据切换添加到下拉列表中的每个<a>元素，也没有，我只是不知道该怎么做或者我做错了什么。我希望我有足够的/正确的外部资源添加到这里（在JS小提琴中，你不能将它们添加到HTML或它没有正确渲染）。任何帮助将不胜感激这是我的小提琴的链接：https://jsfiddle.net/Tamara6666/2cup6cno/ 继承人＆＃39;我的代码：

<header>
</header>

<body>
  <ul id="myTab" class="nav nav-tabs">
    <li>
      <a href="#">
        <icon class="fa fa-home"></icon>
      </a>
    </li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
      <ul class="dropdown-menu">
        <li><a href="#">Member Activity</a></li>
        <li><a href="#">Member Forum</a></li>
        <li><a href="#">Member Lists</a></li>
        <li><a href="#">Member Groups</a></li>
      </ul>
    </li>
    <li role="presentation"><a href="#">Pet Help</a></li>
    <li role="presentation"><a href="#">Pets for Sale</a></li>
    <li role="presentation"><a href="#">Pet Services</a></li>
  </ul>
<main>
<div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>    

</main>
</body>

Answer 1

添加 <script type="text/javascript">$(".dropdown-toggle").dropdown();</script> </body>

另外，不要忘记在包含bootstrap之前添加jquery。

<script type="text/javascript">$(".dropdown-toggle").dropdown();</script>

</body>

Answer 2

你没有包含jQuery，因为Bootstrap.js需要jQuery。如果您打开浏览器控制台，则会发现错误Uncaught Error: Bootstrap's JavaScript requires jQuery

添加jQuery将解决您遇到的问题。我已修改您的小提琴（https://jsfiddle.net/2cup6cno/9/）以包含其他标签窗格。您可以完全修改它们或将其删除。

在http://getbootstrap.com/javascript/#tabs上使用标签的正确标记和使用情况，查看Bootstrap上的示例

Twitter Bootstrap的下拉菜单在JS Fiddle

2 个答案: