Question

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

我在页面上有多个div使用.slidetoggle（）;在子div中显示更多内容。我想要做的是添加一个“全部展开”按钮，该按钮只会扩展那些已关闭的按钮，而其余部分则保持不变。目前，展开全部工作，但仅当所有项目都已折叠。否则它基本上只是切换，所以如果用户打开一个项目，然后决定稍后他们只想查看所有项目，它将打开那些已关闭的项目，但关闭已经打开的项目。我知道有一个简单的解决方法，但我对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，以供参考：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以及代码段（已移除</div>的意外第二次关闭answers代码）：

$(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（）只有折叠的项目

1 个答案: