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>