Question

刚看了一下Bootstrap工具包，试图让下拉菜单在顶层菜单上运行。

我对菜单的代码如下

<div class="topbar">
  <div class="fill">
    <div class="container">
      <ul class="nav">
        <li class="active"><a href="/index.php">Home</a></li>
        <li><a href="/about.php">About Us</a></li>
        <li><a href="/news.php">Site News</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Community</a>
          <ul class="dropdown-menu">
            <li><a href="/chatroom.php">Chatroom</a></li>
            <li class="divider"></li>
            <li><a href="/forums.php">Forums</a></li>
          </ul>
        </li>
      </ul>

      <form class="pull-left" action="">
        <input type="text" placeholder="Search" />
      </form>
      <ul class="nav secondary-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Account</a>
          <ul class="dropdown-menu">

            <li><a href="/profile.php?id=<? echo $_SESSION['id'];?>">Profile</a></li>
            <li><a href="/settings.php">Settings</a></li>
            <li><a href="/messages.php">Messages</a></li>
            <li class="divider"></li>
            <li><a href="/maintenance/admin.php">Admin</a></li>
            <li class="divider"></li>
            <li><a href="/process.php">Logout</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>

</div>

单击时下拉列表没有执行任何操作？

我已经包含了以下css文件。

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

有人可以帮我吗？感谢。

Answer 1

尝试添加下拉功能的JavaScript文件 - http://twitter.github.com/bootstrap/#javascript

Answer 2

您需要确保引用了jquery，并在页面中引用了bootstrap js。

e.g

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>

然后，您需要为其中一个容器提供属性data-dropdown="dropdown"，或者使用jquery $('#mycontainerid').dropdown();

将容器显式设置为下拉容器

Answer 3

通常在引导程序上面引用Jquery就可以了。您甚至不必明确提及bootstrap-dropdown。在两个不同的场合为我工作。希望它有所帮助！

Answer 4

尝试将data-dropdown属性添加到您的初始<li>，例如

<li class="dropdown" data-dropdown="dropdown">

希望这有帮助。

无法让下拉列表发挥作用？

4 个答案: