Question

我制作了以下JSFiddle：http://jsfiddle.net/circuitlego/9dU2y/我要在面板中制作一个下拉菜单。问题是每当我点击其中一个切换按钮时，下拉菜单就会关闭。我尝试了一些我在网上找到的解决方案，但随后它们使切换按钮无法正常工作。

这是我的HTML：

<!DOCTYPE html>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="navbar-brand"><a href="#">Fiddle</a></div>
    </div>
    <div id="signInDropdown" class="btn-group navbar-right">
      <button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default navbar-btn navbar-right dropdown-toggle">Sign in<span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li>
          <form>
            <div class="form-group">
                <input type="email" id="emailInput" placeholder="email address" class="form-control" />
            </div>
            <div class="form-group">
                <input type="password" id="passwordInput" placeholder="password" class="form-control" />
            </div>
            <div id="signInInput" data-toggle="buttons" class="btn-group btn-group-xs btn-group-justified form-group">
              <label class="btn btn-default">
                  <input type="radio" />Student
              </label>
              <label class="btn btn-default">
                  <input type="radio" />Fellow
              </label>
              <label class="btn btn-default">
                  <input type="radio" />Coordinator
              </label>
            </div>
            <button type="submit" class="btn btn-primary form-control">Sign In</button>
          </form>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

你需要在jquery中防止

DEMO http://jsfiddle.net/9dU2y/1/

$(document).ready(function(){
    //Handles menu drop down
    $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
    });
});

更新回答

演示 http://jsfiddle.net/P8C74/

Answer 2

在表单前加li='dropdown' ..

<ul id="signInDropdown" class="nav navbar-nav navbar-right">
      <li class="dropdown">
      <button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default navbar-btn dropdown-toggle">Sign in<span class="caret"></span></button>
      <ul class="dropdown-menu">
      ...

演示：http://www.bootply.com/122824

避免Bootstrap导航栏中的下拉列表崩溃

2 个答案: