單擊導航丸時，Bootstrap中的選項卡式下拉菜單保持關閉

Question

我在引導程序中創建一個選項卡式下拉菜單時遇到問題，該菜單包含用於“注冊”和“登錄”的表單，但是每次單擊選項卡時，它們都會關閉。 我不明白為什么。 我已經嘗試了流行的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>