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

时间:2015-09-21 19:35:17

标签: jquery accordion

我有一个我创建的自定义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 -->

1 个答案:

答案 0 :(得分:0)

你可以稍微简化一下:(你不需要旗帜)

   $(".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。您可以返回所需的动画,我将其简化为演示目的。