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>