【问题标题】：jQuery Toggle Expand only if hiddenjQuery Toggle 仅在隐藏时展开
【发布时间】：2016-01-03 15:33:35
【问题描述】：
我有一个带有“全部展开”链接的列表，只有在它被隐藏时才应该展开该列表。我现在拥有的是它检查第一个列表是否仅扩展。例如，如果列表 1 的列表被展开，并且您按全部展开，它将切换列表，在列表 2 正确显示时隐藏它。我无法弄清楚如何仅在隐藏时进行切换。反之亦然，对于 Hide all 按钮，它应该隐藏所有展开的列表。
http://jsfiddle.net/jzhang172/dp5c3uLp/2/
$(function(){
$("li.one").click(function(){
$(this).next("div.expand").toggle('slow');
});
$("p.expand").click(function(){
if($("div.expand").css("display")=="none"){
$("div.expand").show('slow');
}
});
});
li.one a{
text-decoration:none;
}
ul{
margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>
<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
【问题讨论】：
标签：
javascript
jquery
html
【解决方案1】：
if ($("div.expand").is(':hidden')) { ... }
或使用此选择器仅选择隐藏的 div：
$("div.expand:hidden")
【解决方案2】：
您可以使用not() 和:visible 伪选择器。
$(function(){
$("li.one").click(function(){
$(this).next("div.expand").not(":visible").toggle('slow');
});
$("p.expand").click(function(){
if($("div.expand").css("display")=="none"){
$("div.expand").show('slow');
}
});
});
li.one a{
text-decoration:none;
}
ul{
margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>
<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
【解决方案3】：
不需要找到隐藏的 div 你只显示所有div.expand 因为我认为expand all 意味着你想显示所有div.expand
这里是 sn-p 试试这个：
$(function(){
$("li.one").click(function(){
$(this).next("div.expand").toggle('slow');
});
$("p.expand").click(function(){
$("div.expand").show('slow');
});
$("p.hide").click(function(){
$("div.expand").hide('slow');
});
});
li.one a{
text-decoration:none;
}
ul{
margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>
<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
【解决方案4】：
尝试改用hidden 过滤器
$(function(){
$("li.one").click(function(){
$(this).next("div.expand").toggle('slow');
});
$("p.expand").click(function(){
if($("div.expand").is(":hidden")){
$("div.expand").show('slow');
}
});
});
li.one a{
text-decoration:none;
}
ul{
margin-bottom:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expand"><a href="" onclick='return false;'>[Expand All]</a></p>
<p class="hide"><a href="" onclick='return false;'>[Hide All]</a></p>
<li class="one"><a href="" onclick='return false;'>1(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>
<li class="one"><a href="" onclick='return false;'>2(Expand Me)</a></li>
<div class="expand" style="display:none;">
<li>1</li>
<li>2</li>
</div>