选项卡下拉菜单在引导保持关闭时,单击导航药丸
Tabbed dropdown menu in Bootstrap keeps closing when clicking nav-pills
我在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>
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 检测在确认页面导航时单击了哪个按钮
- 引导菜单没有't在导航栏中单击打开
- j查询单击导航不起作用
- 单击导航索引数组时发出双重警报
- Phonegap,如何在单击导航栏按钮时触发函数
- Jquery Mobile单击导航栏上的复选框按钮
- reactJS在转到另一个URL时如何传递状态?(单击导航栏上的“新建”,转到提交表单)
- 单击导航选项卡时分配jQuery功能
- 单击导航项定位链接时如何关闭切换菜单
- 单击导航按钮时,如何停止查询动画que
- 未捕获的TypeError: Cannot read property 'top'在引导中单击导航栏时未
- 如何打开下一个屏幕右键单击导航抽屉在反应原生
- 单击导航addClass/removeClass
- 如何使用selenium web驱动程序单击导航栏
- 单击导航后将模式滚动到顶部
- JavaScript按钮,单击导航到另一个HTML页面
- 将单击导航绑定到使用间隔的更改文本
- 如何防止单击导航栏项后重新加载单页应用程序
- 选项卡下拉菜单在引导保持关闭时,单击导航药丸