Question

我有一个我创建的自定义jQuery手风琴套装 - 但是有一些问题让它工作，所以只允许一个手风琴一次打开 - 所以，一开始都关闭，然后当用户打开一个，如果他们点击打开另一个，打开的那个应该关闭，所选的一个打开。然后它应该只允许所选择的一次在任何时候在视图中...有任何帮助吗？代码如下：

HTML

.desc_img

JQUERY

<!-- 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 -->

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/

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

P.S。您可以返回所需的动画，我将其简化为演示目的。

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

1 个答案: