javascript - Jquery Accordion 上的图标更改

Question

我试图在单击某个部分时添加图标更改，我在打开或关闭所有 Accordion 时添加了该功能，但是当我只打开一个部分而不更改所有部分时我无法添加此功能其他部分图标。

This is the code:

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

Answer 1

在您的 Fiddle 中，contentAreas 是所有内容区域的列表。所以像这样绑定(bind)事件

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>