javascript - 单击 nav-pills 时 Bootstrap 中的选项卡式下拉菜单不断关闭

Question

我在 Bootstrap 中创建选项卡式下拉菜单时遇到问题，其中包含“注册”和“登录”表单，但每次单击选项卡时，它们都会关闭。我不明白为什么。我尝试过流行的 e.stoppropogate()，但它似乎对我不起作用。任何帮助，将不胜感激。

这是我的 HTML:

<div class="container-fluid ">
    <div class = "container">
        <a class="navbar-brand" href="#"><img src="img/logo.svg" height = "75px" type="image/svg+xml"/></a>
    <form>
        <div id="myDropDown " class="dropdown pull-right">
            <a id="dLabel" role="button"  data-target="javascript:;" href="/page.html">Sign In/Register <span class="caret"></span></a>
                <ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <ul class="nav nav-pills ">
                        <li class="active"><a href="#login" data-toggle="tab" >Sign In</a></li>
                        <li><a href="#register" data-toggle="tab" >Register</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane " id="register">
                        <!--register section-->
                            <div class="col-md-12">
                                <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                    <div class="form-group">
                                        <span>Name:</span>
                                        <label class="sr-only" for="exampleInputEmail2">Name</label>
                                        <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Name" required>
                                    </div>
                                    <span>Email:</span>
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                     </div>
                                     <span>Password:</span>
                                     <div class="form-group">
                                         <label class="sr-only" for="exampleInputPassword2">Password</label>
                                         <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                      </div>
                                      <span>Confirm Password:</span>
                                      <div class="form-group">
                                          <label class="sr-only" for="exampleInputPassword2">Confirm Passowrd</label>
                                          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Confirm Password" required>
                                      </div>
                                      <div class="form-group">
                                          <button type="submit" class="btn btn-success btn-block">Register</button>
                                      </div>
                                  </form>

                                  <!--end register form-->
                              </div>
                          </div>
                          <!--tab pane register-->

                          <!--begin login form-->
                          <div class="tab-pane active" id="login">
                              <div class="col-md-12">
                                  <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">

                                      <div class="form-group">
                                          <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                      </div>

                                      <div class="form-group">
                                          <label class="sr-only" for="exampleInputPassword2">Password</label>
                                          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                      </div>

                                      <div class="checkbox">
                                          <label><input type="checkbox"> Remember me</label>
                                      </div>

                                      <div class="form-group">
                                          <button type="submit" class="btn btn-success btn-block">Sign in</button>
                                      </div>
                                  </form>
                                  <!--end login form-->
                              </div>
                          </div>
                          <!--tab pane login-->
                      </div>
                      <!--tab content-->
                  </ul>
                  <!-- myTabs ul-->
                  <ul class = "pull-right"><a href="#"><span class=" glyphicon glyphicon-shopping-cart"></span></a></ul>
              </div>
              <!--myDropdown-->
          </form>
      </div><!--container-->
  </div><!--container fluid-->

这是我的 JavaScript:

    <script>
    $('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
        e.stopPropagation()        
        $(this).tab('show')
    })
    </script>

Answer 1

实际上你缺少一个属性 只需添加 data-toggle="dropdown"属性和 id="dLabel"，如下面的示例所示。 它会起作用.. 享受:)

<a id="dLabel" role="button"  data-toggle="dropdown" href="/page.html">Sign In/Register <span class="caret"></span></a>