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

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

或仅使用此选择器选择隐藏的div：

$("div.expand:hidden")

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

Answer 3

无需找到您只显示所有div.expand的隐藏div，因为我的想法expand all表示您想要显示所有div.expand

这里是片段，试试这个：

＆＃13;

＆＃13;

$(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');  
});
});

＆＃13;

li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试使用hidden过滤器

＆＃13;

＆＃13;

$(function(){
  $("li.one").click(function(){
    $(this).next("div.expand").toggle('slow');
  });

  $("p.expand").click(function(){
    if($("div.expand").is(":hidden")){
      $("div.expand").show('slow');
    }
  });
});

＆＃13;

li.one a{
  text-decoration:none;
}

ul{
  margin-bottom:30px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;