网站:http://pegasusbus.com/ebrochure
我的菜单工作得很好,但是当我点击导航中的"packages"下拉菜单时,下拉菜单在我选择一个选项之前就关闭了。这只发生在手机上。
谁能告诉我这是怎么回事?在您的freelancer.js
文件中,您的目标是导航栏内的所有a
标签(包括navbar-toggle
),以便在单击任何链接时折叠移动菜单。
当前你有这个:
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
你可以使用jQuery:not() Selector
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
$('.navbar-toggle:visible').click();
});
**作为旁注,如果您还没有准备好,您应该考虑通过验证过程运行您的站点:参见验证器。例如Nu
工作的例子:
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top'
})
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
$('.navbar-toggle:visible').click();
});
body {
position: relative;
}
section {
padding: 50px;
height: 500px;
}
section:nth-child(3) {
background-color: lightgreen;
}
section:nth-child(4) {
background-color: lightblue;
}
section:nth-child(5) {
background-color: darkblue;
}
section:nth-child(6) {
background-color: lightcoral;
}
section:nth-child(7) {
background-color: darkmagenta;
}
section:nth-child(8) {
background-color: lightskyblue;
}
section:nth-child(9) {
background-color: lightgoldenrodyellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="tophead">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#">Pegasus eBrochure</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button">Packages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#deals">Vacation Deals</a>
</li>
<li><a href="#sports">Sports</a>
</li>
<li><a href="#shopping">Shopping</a>
</li>
<li><a href="#holiday">Holiday</a>
</li>
<li><a href="#circuit">Circuits</a>
</li>
</ul>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="deals">
<h1>Vacation Deals</h1>
</section>
<section id="sports">
<h1>Sports</h1>
</section>
<section id="shopping">
<h1>Shopping</h1>
</section>
<section id="holiday">
<h1>Holiday</h1>
</section>
<section id="circuit">
<h1>Circuits</h1>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
我看到您的网站在下面一行href="#"
缺失,只需添加它将解决您的问题
<a class="dropdown-toggle" data-toggle="dropdown" role="button">Packages<span class="caret"></span></a>