当您单击xs屏幕的导航栏外部和内部时,我使用下面的代码折叠导航栏。如果您没有下拉菜单,代码很有用。我已经在我的导航栏上引入了下拉菜单,所以当您尝试在小屏幕上打开下拉列表时,导航栏会崩溃。如何让这些下拉列表始终为xs屏幕打开并隐藏其父链接?
崩溃导航的脚本
// Collase if Click Happened Inside of .navbar
$('.navbar-nav a').on('click', function(){
if($('.navbar-toggle').css('display') !=='none'){
$(".navbar-toggle").trigger("click");
}
});
// Collase if Click Happened Outside of .navbar
$('body').bind('click', function(e) {
if($(e.target).closest('.navbar').length === 0) {
// click happened outside of .navbar, so hide
var opened = jQuery('.navbar-collapse').hasClass('collapse in');
if ( opened === true ) {
$('.navbar-collapse').collapse('hide');
}
}
});
html代码
<!-- Navigation Bar -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a href="#page-top" title="Welcome" target="_self" class="navbar-brand page-scroll">Brand</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about" title="About US" target="_self" class="page-scroll">About</a>
</li>
<li class="dropdown">
<a href="#" title="Our Services & Skills" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
Services <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#services" title="OUR Services" target="_self" class="page-scroll">OUR Services</a>
</li>
<li>
<a href="#skills" title="Our Skills Chart" target="_self" class="page-scroll">OUR Skills Chart</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" title="Our Portfolio & Testimonials" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
Portfolio <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#portfolio" title="Our Portfolio" target="_self" class="page-scroll">OUR Work</a>
</li>
<li>
<a href="#testimonials" title="Testimonials" target="_self" class="page-scroll">Testimonials</a>
</li>
</ul>
</li>
<li>
<a href="#team" title="Our Team" target="_self" class="page-scroll">Team</a>
</li>
<li>
<a href="#contact" title="Contact US" target="_self" class="page-scroll">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
答案 0 :(得分:1)
更新事件绑定以处理点击.navbar内部的Happened,如下所示
// Collase if Click Happened Inside of .navbar
$('.navbar-nav a').on('click', function(){
if(!$(this).parent('.dropdown').length && $('.navbar-toggle').css('display') !=='none'){
$(".navbar-toggle").trigger("click");
}
});