jQuery Toggle只在隐藏时才展开

Question

我有一个带有“全部展开”链接的列表，只有当它被隐藏时才会展开列表。我现在拥有的是它检查第一个列表是否仅扩展。例如，如果列表1的列表已展开，并且按下全部展开，则它将切换列表，在列表2正确显示时将其隐藏起来。我一直无法弄清楚如何只在隐藏时切换。反之亦然，对于全部隐藏按钮，它应该隐藏所有扩展列表。

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>

Answer 1

无需找到隐藏的div你只是显示所有div.expand因为我的思想expand all意思是你要显示所有div.expand

这里片断只是试试这个：

$(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>

Answer 2

if ($("div.expand").is(':hidden')) { ... } 

或只选择隐藏的div这个选择：

$("div.expand:hidden") 

Answer 3

您可以使用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>

Answer 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>