jQuery 手风琴，一次只允许打开一个

Question

我有一个我创建的自定义 jQuery 手风琴组 - 但在使其工作时遇到一些问题，因此一次只允许打开一个手风琴 - 所以，在开始时所有手风琴都是关闭的，然后当用户打开一个时，如果他们单击打开另一个，则打开的应该关闭，并且选择的打开。那么它应该只允许被选中的一个在任何时候都被看到……这方面有什么帮助吗？代码如下：

HTML

<!-- Accordion -- ONE -->
<div class="accordionParent">
<div class="fullWidthWrapper accordionWrapper accordionPink">
<div class="container">
<div class="accordionPencil"><a class="accordionTrigger"><h3>ONE</h3></a></div>
<div class="closeAccordionWrapper"><img src="assets/images/about/accordionX.png" width="120" class="accordionBtn"></div>
</div>
</div>

<div class="fullWidthWrapper accordionContent">
<div class="container">
<p>CONTENT HERE...</p>
</div>
</div>
</div>
<!-- end of Accordion -- ONE -->

<!-- Accordion -- TWO -->
<div class="accordionParent">
<div class="fullWidthWrapper accordionWrapper accordionBlue">
<div class="container">
<div class="accordionPencil"><a class="accordionTrigger"><h3>TWO</h3></a></div>
<div class="closeAccordionWrapper"><img src="assets/images/about/accordionX.png" width="120" class="accordionBtn"></div>
</div>
</div>

<div class="fullWidthWrapper accordionContent">
<div class="container">
<p>CONTENT HERE...</p>
</div>
</div>
</div>
<!-- end of Accordion -- TWO -->



<!-- Accordion -- THREE -->
<div class="accordionParent">
<div class="fullWidthWrapper accordionWrapper accordionPink">
<div class="container">
<div class="accordionPencil"><a class="accordionTrigger"><h3>THREE</h3></a></div>
<div class="closeAccordionWrapper"><img src="assets/images/about/accordionX.png" width="120" class="accordionBtn"></div>
</div>
</div>

<div class="fullWidthWrapper accordionContent">
<div class="container">
<p>CONTENT HERE...</p>
</div>
</div>
</div>
<!-- end of Accordion -- THREE -->

JQUERY

$(document).ready(function() {

var accordionInView = 0

$(".accordionWrapper").click(function(){

    if (accordionInView == 0) {

    accordionInView = 1;
    $(this).find(".accordionBtn").toggleClass("rotated");
    $(this).closest('.accordionParent').find(".accordionContent").css('opacity', 0).slideDown('slow').animate({ opacity: 1 },{ queue: false, duration: 'slow' });

    }

    else if (accordionInView == 1) {

    accordionInView = 0;
    $(this).find(".accordionBtn").toggleClass("rotated");
    $(this).closest('.accordionParent').find(".accordionContent").css('opacity', 1).slideUp('slow').animate({ opacity: 0 },{ queue: false, duration: 'slow' });
    }


});

});

Answer 1

你可以稍微简化一下：（你不需要标志）

   $(".accordionWrapper").click(function() {

   if ($(this).closest('.accordionParent').find(".accordionContent").is(':visible')) {
     $(this).find(".accordionBtn").toggleClass("rotated");
     $(this).closest('.accordionParent').find(".accordionContent").slideUp('slow');

   } else {
     $(this).find(".accordionBtn").toggleClass("rotated");
     $(this).closest('.accordionParent').find(".accordionContent").slideDown('slow');
     $(this).closest('.accordionParent').siblings('.accordionParent').find(".accordionContent").slideUp('slow');
   }

 });

演示：http://jsfiddle.net/8L5kkss2/

所以，检查内容是否可见，如果是 -> 隐藏，如果是不可见 -> 显示，并隐藏其余的手风琴内容（最后一行在这里很重要 - 它会关闭其他部分打开的内容）。

P.S。你可以return你想要的动画，我为了演示目的简化了它。

jQuery 手风琴，一次只允许打开一个

jQuery accordions, allowing one open at once only

jquery

accordion