jQuery 可扩展和可折叠的 div答案

【问题标题】：jQuery expandable and collapsible divsjQuery 可扩展和可折叠的 div
【发布时间】：2013-12-21 08:22:47
【问题描述】：

我在创建的常见问题解答页面上遇到了一些展开和折叠 div 的小问题。当用户单击一个问题时，它需要折叠所有其他答案 div 并仅将答案展开到单击的（问题）div。我现在已经弄清楚了——除非用户点击了页面上的所有 div 并且它们都展开然后折叠之后，然后需要点击 2 次鼠标才能再次重新打开它们，而不仅仅是一次。

jQuery:

$(document).ready(function() {
$('.answer').hide(); // hide the answer divs first

$('#content .question').click().toggle(
    function() {
         $('.answer').hide(); //hide all other divs when clicked
         $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon
         $(this).next('.answer').slideDown();  //slidedown the appropriate div
         $(this).addClass('close'); //as well as insert the 'expanded' icon
         },
         function() {
            $(this).next('.answer').slideUp(); // hide the selected div
            $(this).removeClass('close'); // as well as remove the 'expanded' icon
            }
        );
    });

CSS：

#content {width: 1310px; height: 350px;}
#col_1 {width: 380px; height: 350px; margin: 20px; padding: 5px;}
.question {color: #64AA01; background-image:  url(images/open_div.jpg); cursor: pointer; background-repeat: no-repeat; padding-left: 15px;}
.close {background-image:  url(images/close_div.jpg);}
.answer {margin-left: 16px;}

HTML：

<div id="content">

<div id="col_1">

<div class="question">
<div align="justify">Q: This is question 1.</div>
</div>

<div class="answer" style = "width: 360px;">
<div align="justify">A: This answer is the answer to question 1.</div>
</div><br><br>

<div class="question">Q: This is question 2.</div>
<div class="answer" style = "width: 360px;">
<div align="justify">A: This answer is the answer to question 2.</div>
</div><br><br>

<div class="question">
<div align="justify">Q: This is question 3.</div>
</div>

<div class="answer" style = "width: 360px;">
<div align="justify">A: This answer is the answer to question 3.</div>
</div>

</div>

</div>

有什么想法吗？

【问题讨论】：

也许值得看看 jQuery-ui 和手风琴特性。它包含您所描述的一切：jqueryui.com/accordion

标签： jquery

【解决方案1】：

这是一个Plunker 示例。

在这种情况下你不需要使用切换：

 $('#content .question').click(function() {
     $('#content .question').removeClass('close'); // as well as remove the 'expanded' icon
     $('#content .answer').slideUp();
     $(this).next('.answer').slideDown(); //slidedown the appropriate div
     $(this).addClass('close'); //as well as insert the 'expanded' icon
    });
  });

另外，我将此添加到 css 中，以便您的答案默认不显示：

.answer {
   display: none;
}

【讨论】：

感谢大家的及时回答，他们都是很好的答案，我选择了 Lerevemes 答案作为最适合我需要的答案 - 现在效果很好。也感谢其他所有人！

【解决方案2】：

这可能是您正在寻找的：

jsFiddle Demo

$('.answer').hide(); // hide the answer divs first

$('.question').click(function() {
    $('.answer').slideUp();
    $(this).next('.answer').slideDown();
});

这是一个修改，允许您单击问题之外的任何地方，所有答案都将重新关闭。请注意使用e.stopPropagation() 来防止答案总是被重新隐藏。

jsFiddle Demo 2

$('.answer').hide(); // hide the answer divs first

$('.question').click(function(e) {
    $('.answer').slideUp();
    $(this).next('.answer').slideDown();
    e.stopPropagation();
});

$(document).click(function(){
    $('.answer').slideUp();
});

【讨论】：