我一直在尝试将响应式手风琴风格的多级菜单与各种教程的内容放在一起。我遇到的问题是在响应视图的辅助列表中使用了slideToggle,似乎什么也没有发生,并且我没有看到任何控制台错误。
我已经设置了JS小提琴,因此您可以在这里轻松查看它:JS Fiddle
非常感谢任何帮助,谢谢。
的HTML
<nav class="clearfix">
<a href="#" id="pull">Menu</a>
<ul class="clearfix" id="TopLevel-List">
<li><a href="#" id="trigger_Nested-0">Nav 1</a>
<ul class="clearfix" id="Nested-0">
<li><a href="#">Ad Hoc</a></li>
<li><a href="#">Drill Down</a></li>
<li><a href="#">Ranking Report</a></li>
</ul>
</li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a>
<ul>
<li><a href="#" >Ad Hoc</a></li>
<li><a href="#">Drill Down</a></li>
<li><a href="#">Ranking Report</a></li>
</ul>
</li>
<li><a href="#">Nav 4</a>
<ul>
<li><a href="#" >Ad Hoc</a></li>
<li><a href="#">Drill Down</a></li>
<li><a href="#">Ranking Report</a></li>
</ul>
</li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
</ul>
</nav>
jQuery的
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
$(function(){
$("ul[id|=Nested]").hide();
$("a[id|=trigger_Nested]").click(function() {
$(this).siblings("ul").slideToggle("fast");
return false;
});
});
最佳答案
小提琴:http://jsfiddle.net/X88vM/3/
没有任何反应的原因是您在CSS中将li
显示设置为none
。
在@media screen and (max-width: 600px)
下,将显示更改为“阻止”:
nav li ul li {
display: block;
height: auto;
margin: 0;
padding: 0;
width:100px;
}
关于jquery - 响应式多级菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20498259/