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 =＆＃34; dropdown＆＃34;属性id =＆＃34; dLabel＆＃34;如下例所示.. 它会工作.. 享受：）

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

单击导航丸时，Bootstrap中的选项卡式下拉菜单会保持关闭状态

1 个答案: