Javascript 避免引导导航栏中的下拉折叠_Javascript_Jquery_Twitter Bootstrap_Twitter Bootstrap 3

Javascript 避免引导导航栏中的下拉折叠

javascript jquery twitter-bootstrap twitter-bootstrap-3

Javascript 避免引导导航栏中的下拉折叠,javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap,Twitter Bootstrap 3,我制作了以下JSFIDLE：我想在其中制作一个下拉式登录面板。问题是，每当我单击其中一个切换按钮时，下拉列表就会关闭。我在网上找到了几种解决方案，但它们使切换按钮无法正常工作这是我的html： <!DOCTYPE html> <div class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"

我制作了以下JSFIDLE：我想在其中制作一个下拉式登录面板。问题是，每当我单击其中一个切换按钮时，下拉列表就会关闭。我在网上找到了几种解决方案，但它们使切换按钮无法正常工作

这是我的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>

您需要在jquery中防止

演示

更新答案

演示

在表单前包含一个li='下拉列表'

<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">
      ...

演示：

切换按钮不会保持选中状态。这是我尝试过的方法之一。@circuitlego您指的是按钮组？是的，按钮组中的按钮应充当单选按钮。@circuitlego请检查更新答案链接。让我知道如果这个代码不起作用，我们可以使用javascript，如果你的代码仍然不起作用，我只是复制粘贴你的代码到我的环境中，它不起作用。

<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">
      ...