javascript 从 div 显示/隐藏列表 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13287183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide list ul from divs
提问by Dimikere
I have this code:
我有这个代码：
<ul>
<div class="sub_cat_box">
<li class="current"><a href="#">Cat 1</a></li>
<ul>
<li><a href="#">Prod1</a></li>
<li><a href="#">Prod1</a></li>
</ul>
</div>
<div class="sub_cat_box">
<li class="current"><a href="#">Cat 2</a></li>
<ul>
<li><a href="#">Prod1</a></li>
<li><a href="#">Prod1</a></li>
</ul>
</div>
</ul>
I want to show/hide each child <ul>when I click the <li class='current'>. I tried with jQuery, but I didn't make it.
我想<ul>在单击<li class='current'>. 我尝试过 jQuery，但我没有成功。
回答by Kevin Bowersox
Use jQuery to select li elements with the class selector, then bind an event handler to the click function. The bound function should find the next ul relevant to the selected element and call the togglemethod upon it. By default the jQuery toggle method will toggle the visibility of an element:
使用 jQuery 通过类选择器选择 li 元素，然后将事件处理程序绑定到 click 函数。绑定函数应该找到与所选元素相关的下一个 ul 并在其上调用切换方法。默认情况下，jQuery 切换方法将切换元素的可见性：
$(".current").click(function(){
$(this).next("ul").toggle();
});
Working example: http://jsfiddle.net/ytXFQ/
工作示例：http: //jsfiddle.net/ytXFQ/
回答by Mic
Your HTML is not correct.
您的 HTML 不正确。
Try it with this HTML structure:
试试这个 HTML 结构：
<ul>
<li class="current">
<a href="javascript: toggleChildren('cat1');">Cat 1</a>
<div class="sub_cat_box" id="cat1">
<ul>
<li><a href="#">Prod1</a></li>
<li><a href="#">Prod1</a></li>
</ul>
</div>
</li>
</ul>
Function:
功能：
function toggleChildren(id) {
var elem = document.getElementById(id);
if(!elem) alert("error: not found!");
else {
if(elem.style.display == "block")
elem.style.display = "none";
else
elem.style.display = "block";
}
}
CSS:
CSS：
.sub_cat_box {display: none;}
回答by Viktor S.
Your HTML is not valid (only il is allowed inside ul, and div and other uls must be inside lis). It should be something like this:
您的 HTML 无效（仅 il 允许在 ul 内，div 和其他 uls 必须在 lis 内）。它应该是这样的：
<ul>
<li class="current"><div class="sub_cat_box">
<a href="#">Cat 1</a>
<ul>
<li><a href="#">Prod1</a></li>
<li><a href="#">Prod1</a></li>
</ul>
</div>
</li>
<li class="current">
<div class="sub_cat_box"> <a href="#">Cat 2</a>
<ul>
<li><a href="#">Prod1</a></li>
<li><a href="#">Prod1</a></li>
</ul>
</div>
</li>
</ul>
Once it is done like that, you can apply code like this:
完成后，您可以像这样应用代码：
$(".current").click(function(e){
$(this).find('ul').toggle();
})
回答by Pragnesh Chauhan
$('li.current a').click(function(){
$(this).parent().next('ul').slideToggle(); // or
//$(this).parent().next('ul').toggle();
});
回答by ChuckE
$('li.current').on('click', 'a', function() {
$(this).parent().find('ul').toggle();
return false;
});
回答by ant
Use this:
用这个：
$(document).on("click", "li.current > a", function(){
$(this).next().slideToggle();
});
回答by rahul
回答by Sjaak Rusma
Try this:
试试这个：
$("ul > li.current").on('click', 'a', function(){
$('ul.class').children().toggle();
});
Where class is your ul class. This is the cleanest jQuery code, I think.
其中 class 是您的 ul 类。我认为这是最干净的 jQuery 代码。
