选项卡下拉菜单在引导保持关闭时,单击导航药丸

Tabbed dropdown menu in Bootstrap keeps closing when clicking nav-pills

本文关键字:单击 导航 下拉菜单 选项      更新时间:2023-09-26

我在bootstrap中创建包含"注册"answers"登录"表单的选项卡下拉菜单时遇到问题,但每次我单击选项卡时,它们都会关闭。我不明白为什么。我试过流行的e.p stopproprogate(),但它似乎不适合我。任何帮助都会很感激。

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

实际上你少了一个属性只需添加data-toggle="dropdown"属性,id="dLabel",如下例所示。会成功的……享受:)

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