Question

想问一下我在导航栏中有一个简单的应用程序，它包含一个像下面的代码段一样的按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">This should close when click <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Do not close when button click <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li style="text-align:center">
              <button class="btn btn-default" type="submit">Button</button>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

我应该如何编写代码，以便点击下拉菜单中的按钮并且不应该关闭下拉列表？此外，css应该只选择特定的下拉菜单而不是其他菜单吗？

注意：请在整页中运行代码。

Answer 1

我给了ul元素id“dropstop”，并应用了以下jquery代码：

$('#dropstop').click(function(event){
     event.stopPropagation();
 });

这是JSfiddle。

我发现了帖子中的jquery代码：Stack Overflow Post

按钮单击时，Twitter Bootstrap NavBar下拉列表仍然打开

1 个答案: