Question

我在点击某个部分时尝试添加图标更改，我在打开或关闭所有手风琴时添加了该功能，但是当我打开一个时，我无法添加此功能部分没有更改所有其他部分图标。

This is the code:

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

Answer 1

在您的小提琴中， contentAreas 是所有内容区域的列表。所以像这样绑定事件

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

表示当您单击Show / Hide All时，隐藏/显示功能将对每个内容区域执行一次。

由于您知道该区域是隐藏还是显示（基于事件），只需为该部分设置适当的图标（ - 或+）。

如果用户通过“显示/隐藏全部”按钮或单击单个标题执行此操作，则无关紧要。

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>

Jquery Accordion上的图标更改

1 个答案: