我在一种非传统的方式中使用jQuery Accordion UI:我让手风琴节点独立开合。我还尝试使用“展开/折叠全部”按钮,但问题是它不能折叠任何单独打开的节点。
如何使“展开/折叠全部”按钮能够折叠所有节点,甚至是单独打开的节点?
不改变HTML标记的情况下,是否可以完成这个操作?
以下两个答案处理了一次只能打开一个节点的手风琴:jQuery UI Accordion Expand/Collapse All和Jquery Accordion Expand All Collapse All
Fiddle:https://jsfiddle.net/d78h6g1c/
$(".accordion").accordion({
collapsible: true,
clearStyle: true,
active: false,
})
$('.accordion-expand-collapse a').click(function() {
$('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
$(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
$(this).toggleClass('collapse');
return false;
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="accordion-expand-collapse"><a href="#">Expand all</a></button>
<div class="accordion">
<h3 class="faq">1. FAQ</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="accordion">
<h3 class="faq">2. FAQ</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="accordion">
<h3 class="faq">3. FAQ</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>