单击菜单按钮时如何隐藏二级子菜单项？
[英]How to hide secondary sub menu item when click on menu button?
问题描述
Ok I am trying to create an accordance style menu with sub-menu in it but when I click the hamburger button, my secondary sub-menu also shows up by default. 
好的，我试图创建一个带有子菜单的样式菜单，但是当我单击“汉堡包”按钮时，默认情况下还会显示我的第二个子菜单。 How to hide "list 2" when first click on the hamburger? 第一次单击汉堡包时如何隐藏“列表2”？ I mean when click on hamburger only show "list 1" without showing "list 2" until you click on "list 1". 我的意思是，当您单击汉堡包时，仅显示“列表1”，而不显示“列表2”，直到您单击“列表1”。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $(".primary-list").slideToggle("fast"); }); }); $(document).ready(function() { $(".primary-list").click(function() { $(".standard-list").slideToggle("fast"); }); }); </script> </head> <body> <button>☰</button> <ul> <li class="primary-list"><a href="#">list 1</a> <ul> <li class="standard-list"><a href="#">list 2</a> </li> <li class="standard-list"><a href="#">list 2</a> </li> <li class="standard-list"><a href="#">list 2</a> </li> </ul> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> </ul> </body> </html>
3 个解决方案
解决方案1
0 2015-04-29 20:54:43
first - use just one $(document).ready(); 首先-仅使用一个$（document）.ready（）;
second - use $(this) 3rd - its better to use .on(); 第二-使用$（this）第三-最好使用.on（）; its avoid any errors you will may facing 4th - you can use display: none; 它避免了您可能会遇到的第四个错误-您可以使用display：无； for your sub-menu css or add $(".standard-list").hide(); 为您的子菜单CSS或添加$（“。standard-list”）。hide（）; to hide your sub-menu on load 隐藏加载时的子菜单
<script>
$(document).ready(function() {
$("button").on('click',function() {
$(".primary-list").slideToggle("fast");
});
$(".primary-list").on('click',function() {
$(this).find('ul').slideToggle("fast");
});
});
</script>
解决方案2
0 已采纳 2015-04-29 20:57:25
Just add $(".standard-list").slideToggle("fast"); 只需添加$(".standard-list").slideToggle("fast"); at first in the document.ready() function. 首先在document.ready（）函数中。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function() { $(".standard-list").slideToggle("fast"); $("button").click(function() { $(".primary-list").slideToggle("fast"); }); }); $(document).ready(function() { $(".primary-list").click(function() { $(".standard-list").slideToggle("fast"); }); }); </script> </head> <body> <button>☰</button> <ul> <li class="primary-list"><a href="#">list 1</a> <ul> <li class="standard-list"><a href="#">list 2</a> </li> <li class="standard-list"><a href="#">list 2</a> </li> <li class="standard-list"><a href="#">list 2</a> </li> </ul> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> <li class="primary-list"><a href="#">list 1</a> </li> </ul> </body> </html>
解决方案3
0 2015-04-29 21:05:25
The problem is that standard-list is inside of primary-list, so when you click on standard, you also click on primary. 问题在于，标准列表位于主列表的内部，因此当您单击标准时，您也会单击主列表。 You need the class on something that is not wrapped around the standard list. 您需要的类不在标准列表中。
<li class="primary-list"><a class="toggle-standard" href="#">list 1</a>
<ul>
<li class="standard-list"><a href="#">list 2</a>
</li>
<li class="standard-list"><a href="#">list 2</a>
</li>
<li class="standard-list"><a href="#">list 2</a>
</li>
</ul>
</li>
$(document).ready(function() {
$("button").click(function() {
$(".primary-list").slideToggle("fast");
});
});
$(document).ready(function() {
$(".toggle-standard").click(function() {
$(".standard-list").slideToggle("fast");
});
});
Fiddle: https://jsfiddle.net/Forklift/7w73otch/ 小提琴： https : //jsfiddle.net/Forklift/7w73otch/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.