我有一个效果很好的水平响应式菜单,这里是link to the page with it
我尝试制作一个带有下拉菜单的新菜单,但无法使其工作。它不会在悬停时显示下拉菜单,而是在下面的行中自动显示菜单。这是 codepen 的链接,显示错误 http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Accomodations</a>
</li>
<li><a href="#">Amenities</a>
</li>
<li><a href="#">Rates</a>
</li>
<li><a href="#">Links</a>
<ul>
<li><a href="#">Dropwdown 1</a>
</li>
<li><a href="#">Dropdown 2</a>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
最佳答案
您的 JavaScript 代码有很多未闭合的行结尾 - 您经常会丢失分号。
此外,jQuery 会将 nav ul
应用于它找到的所有元素。这意味着如果有第二次出现(您的情况就是这种情况),它也将适用于该情况。
相反:您应该为您的 0 级菜单提供一个干净、可识别的类,您可以精确地定位该类:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
然后在你的 jQuery 中:
$('.mother-of-all-dropdown-lists').slideToggle();
抱歉,我一直在写,还有 jQuery 选择器错误:
id/主题标签丢失,所以..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
应该是:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
关于javascript - 带下拉菜单的响应式水平菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38286992/