Question

我在编写一些脚本时遇到了一些麻烦。 HTML和jQuery如下所示。目前，如果您单击.each-question标题，则会向下滑动答案。如果您单击另一个.each-question标题，则打开的答案会向上滑动，新答案会向下滑动。但是，如果您单击已经打开的相同答案的.each-question标题，则无法滑动，而是向上滑动并向下滑动。

我希望如此，如果你单击已经打开的答案的标题，它会向上滑动并保持不变。

$('.faq > .each-question').click(function() {
    $('.faq > .each-answer').slideUp('normal'); 
    $(this).next().slideDown('normal');
});
$('.faq > .each-answer').hide();

<div class="each-question"> Where do your ideas come from? </div>
<div class="each-answer"> Text for answer </div>

更新 - jsFiddle http://jsfiddle.net/YZBLg/

提前干杯， [R

Answer 1

尝试使用.slideToggle()

$('.faq > .each-answer').slideToggle('normal'); 
$(this).next().slideToggle('normal');

Answer 2

试试这个jsfiddle：

$('.faq > .each-question').click(function() {
    $('.faq > .each-answer').slideUp( 'slow'); 
    if($(this).next('.each-answer').is(':not(:visible)')){
        $(this).next('.each-answer').slideToggle('normal');
    }
});
$('.faq > .each-answer').hide();

jQuery手风琴 - 点击展开，点击关闭

2 个答案: