2015-01-27 63 views
0

所以,我已经做了大量的研究,试图找到这个,但似乎无法找到有效的东西。我使用.slidetoggle()在一个页面上有多个div。在子div中显示更多内容。我想要做的就是添加一个“全部展开”按钮,这个按钮只会扩展那些被关闭的按钮,而剩下的只剩下其他按钮。目前,扩展所有的作品,但只有当所有的项目都崩溃了。否则,它基本上只是切换,所以如果用户打开一个项目,然后决定他们只是想查看所有项目,它将打开那些已关闭,但关闭已打开的项目。我知道有一个简单的方法可以解决这个问题,但我对jQuery和javascript都比较陌生。.slideToggle()只有折叠的物品

这是我目前的代码 - 我很抱歉,如果它是sl,的,我是一个初学者!

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

帮助!

回答

0

如果更改此

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

到当前隐藏(折叠)将切换此

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

唯一的答案。

Fiddle,以供参考:http://api.jquery.com/hidden-selector/

一点题外话 - 这不是必要的,你在一个$(document).ready()包装每个click()事件 - 一个就足够了。当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>

+0

非常感谢!这工作就像一个魅力:)并感谢您对重复$(document).ready函数和重复点击函数的反馈。我知道有一种方法只能控制父母的一个子div,所以你可以使用这个功能,但不太清楚如何去做。 – 2015-01-28 05:22:19

+0

@KiannaChauntis很高兴我能够帮助你:)。如果这回答了你的问题,你可以考虑接受这个答案,这样问题将被标记为关闭/解决。如果你不知道这是如何工作的,为什么,只要检查http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235 – 2015-01-28 22:58:41