我正在尝试修复响应式菜单的代码。问题是每当我单击“关于”菜单/按钮时。画廊的子菜单出现,而不是关于子菜单。这是我目前正在处理的代码
HTML
<div class="container12">
<div class="column12">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Gallery</a>
<ul class="sub-menu">
<li><a href="#">Gallery1</a></li>
<li><a href="#">Gallery2</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">About3</a></li>
<li><a href="#">About4</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
JavaScript
<script>
$(document).ready(function(){
$('ul.sub-menu').hide(function(){
$('nav ul li').click(function(){
$('ul.sub-menu').slideToggle(500);
})
})
})
</script>
CSS
nav{margin-top:10px; display:block;}
nav ul li{display:inline; background-color:beige; float:left}
nav ul li a{display:inline-block; text-decoration:none; padding:10px 20px; position:relative}
.display_menu{display:block !important}
ul.sub-menu{position:absolute; display:none}
ul.sub-menu li{display:block; float:none }
@media only screen and (max-width: 360px){
nav ul li{display:block; float:none}
ul.sub-menu{position:static;}
}
最佳答案
您的问题是您的事件处理程序导致所有 ul.sub-menu 元素向下滑动。需要指定只希望被点击元素的子元素向下滑动:
<script>
$(document).ready(function(){
$('ul.sub-menu').hide(function(){
$('nav ul li').click(function(){
$(this).children('ul.sub-menu').slideToggle(500);
})
})
})
</script>
我更改的行是 $(this).children('ul.sub-menu').slideToggle(500);
。在事件处理程序中,this
指的是触发事件的元素,children
函数根据 ul.sub-menu 条件查找其后代。
关于jquery - 修复 Jquery 响应式菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25324618/