.slideToggle() 只有折叠的项目

Question

所以，我做了很多研究试图找到这个，但似乎找不到有用的东西。

我在使用 .slidetoggle() 的页面上有多个 div；在子 div 中显示更多内容。我想做的是添加一个 "expand all" 按钮，该按钮只会展开那些关闭的按钮，而让其余的按钮保持不变。目前，展开所有作品，但前提是所有项目都折叠起来。否则它基本上只是切换，所以如果用户打开一个项目，然后决定他们只想查看所有项目，它将打开那些已关闭的项目，但关闭已经打开的项目。我知道必须有一种简单的方法来解决这个问题，但我对 jQuery 和 javascript.

都比较陌生

这是我当前的代码 - 如果草率，我深表歉意，我是初学者！

$(document).ready(function(){
$(".question1").click(function(){
$("#answer1").slideToggle();
});
});

$(document).ready(function(){
$(".question2").click(function(){
$("#answer2").slideToggle();
});
});

$(document).ready(function(){
$(".question3").click(function(){
$("#answer3").slideToggle();
});
});

$(document).ready(function(){
$(".expandall").click(function(){
$(".answer").slideToggle();
});
});

还有我的 html-

<button class="expandall">Expand All</button>
<div class="question">
<button class="question1"><b>This is a Question</b></button>
</div>

<div id="answer1" class="answer" style="display:none;">
This is an answer
</div></div>

<div class="question">
<button class="question2"><b>This is a Question</b></button>
</div>

<div id="answer2" class="answer" style="display:none;">
This is an answer
</div></div>

<div class="question">
<button href="#" class="question3"><b>This is a Question</b></button>
</div>

<div id="answer3" class="answer" style="display:none;">
This is an answer
</div></div>

求助！

Answer 1

如果你改变这个

$(document).ready(function(){
  $(".expandall").click(function(){
    $(".answer").slideToggle();
  });
});

进入这个

$(document).ready(function () {
  $(".expandall").click(function () {
    $(".answer:hidden").slideToggle();
  });
});

只有当前隐藏（折叠）的答案才会切换。

Fiddle, and for reference: http://api.jquery.com/hidden-selector/

作为旁注 - 没有必要将每个 click() 事件包装在一个 $(document).ready() 中 - 一个就足够了。加载 jQuery 时，将附加所有 click() 个事件。

此外，也可以对所有 question 按钮使用一个语句，而不是 3 个单独的 click() 事件：

$(".question button").click(function () {
    $(this).parent(".question").next(".answer").slideToggle();
});

Fiddle 和片段（删除了 answers 中意外的第二个关闭 </div> 标记）：

$(document).ready(function() {
  $(".question button").click(function() {
    $(this).parent(".question").next(".answer").slideToggle();
  });
  $(".expandall").click(function() {
    $(".answer:hidden").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="expandall">Expand All</button>
<div class="question">
  <button class="question1"><b>This is a Question</b>
  </button>
</div>
<div id="answer1" class="answer" style="display:none;">This is an answer</div>
<div class="question">
  <button class="question2"><b>This is a Question</b>
  </button>
</div>
<div id="answer2" class="answer" style="display:none;">This is an answer</div>
<div class="question">
  <button href="#" class="question3"><b>This is a Question</b>
  </button>
</div>
<div id="answer3" class="answer" style="display:none;">This is an answer</div>

.slideToggle() 只有折叠的项目

.slideToggle() ONLY items that are collapsed

jquery

slidetoggle