Jquery手風琴上的圖標更改

Question

我試圖在單擊部分時添加圖標更改，我在打開或關閉所有手風琴時添加了功能，但是當我只打開一個部分而不更改所有其他部分圖標時卻無法添加此功能。

This is the code:

https://jsfiddle.net/t2beth2L/2/

Answer 1

在您的小提琴中， contentAreas是所有內容區域的列表。 所以像這樣的綁定事件

contentAreas.on({
    hide: ...,
    show: ...
});

意味着當您單擊全部顯示/隱藏時，隱藏/顯示功能將對每個內容區域執行一次。

由於您知道該區域是隱藏還是顯示（基於事件），因此只需為該部分設置適當的圖標（-或+）。

用戶是通過“顯示/全部隱藏”按鈕還是通過單擊單個標題來執行此操作並不重要。

 var headers = $('#accordion .accordion-header'); var contentAreas = $('#accordion .ui-accordion-content ').hide(); var expandLink = $('.accordion-expand-all'); headers.click(function() { var panel = $(this).next(); var isOpen = panel.is(':visible'); panel[isOpen ? 'slideUp' : 'slideDown']() .trigger(isOpen ? 'hide' : 'show'); return false; }); expandLink.click(function() { var isAllOpen = $(this).data('isAllOpen'); contentAreas[isAllOpen ? 'hide' : 'show']() .trigger(isAllOpen ? 'hide' : 'show'); }); contentAreas.on({ show: function($event) { var isAllOpen = !contentAreas.is(':hidden'); if (isAllOpen) { expandLink.text('Close All') .data('isAllOpen', true); } // this content area is now being shown, so show the 'hide' icon setIcon($event.currentTarget, '-'); }, hide: function($event) { var isAllOpen = !contentAreas.is(':hidden'); if (!isAllOpen) { expandLink.text('Open All') .data('isAllOpen', false); } // this content area is now being shown, so show the 'show' icon setIcon($event.currentTarget, '+'); } }); function setIcon(sectionEl, sectionIcon) { var currentSection = $(sectionEl); var currentSectionHeader = currentSection.prev(); currentSectionHeader.find('.plusminus').text(sectionIcon); } 

 body { font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; font-size: 62.5%; } .accordion-expand-holder { text-align: center; padding: 10px; } .container-accordion{ padding-top: 8em; width: 60%; margin: auto; } .ui-accordion-content > p { margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; } #accordion > h2 { cursor:pointer; } .plusminus { float:right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container-accordion"> <p class="accordion-expand-holder"> <a class="accordion-expand-all" href="#">Open All</a> </p> <div id="accordion"> <h2 class="accordion-header ui-accordion-header">Title 1 <span class="plusminus">+</span></h2> <div class="ui-accordion-content"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h2 class="accordion-header ui-accordion-header">Title 2 <span class="plusminus">+</span></h2> <div class="ui-accordion-content"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h2 class="accordion-header ui-accordion-header">Title 3 <span class="plusminus">+</span></h2> <div class="ui-accordion-content"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> </div> </div>