使用jQueryAccordion展開/折疊所有功能

我在非傳統意義上使用 jQuery Accordion UI：我讓手風琴節點獨立打開和關閉。我還嘗試使用“全部展開/折疊”按鈕，這就是問題所在：它不會折疊自己打開的任何節點。

我怎樣才能讓“全部展開/折疊”折疊所有的鼻子，甚至是自己打開的節點？

這可以在不顯著更改 HTML 標記的情況下完成嗎？

這兩個答案涉及一次只允許打開一個節點的手風琴：jQuery UI Accordion Expand/Collapse All和Jquery Accordion Expand All Collapse All

小提琴：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>

uj5u.com熱心網友回復：

處理中的輕微返工以實作所需的行為。

處理觸發點擊h3元素。

1. 當元素有ui-accordion-header-collapsedcss時，呼叫click()將它們全部展開。
2. 當元素有ui-state-activecss 時，呼叫click()將它們全部折疊起來。

嘗試下面的可運行示例：

$(".accordion").accordion({
  collapsible: true,
  clearStyle: true,
  active: false,
})

$('.accordion-expand-collapse a').click(function() {
  
  if ($(this).text() == 'Expand all') {
      // Fire click on any that are already collapsed to expand.
      $('.accordion h3.ui-accordion-header-collapsed').click();
      $(this).text('Collapse all');
  } else {
      // Fire click on any that are already active to collapse.
      $('.accordion h3.ui-state-active').click();
      $(this).text('Expand all');
  }
  
  return false;
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.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>

標籤：javascript查询jquery-ui-手风琴

上一篇：使用jQuery的多個下拉串列過濾div

下一篇：如何檢查時間是否在兩個時間間隔之間