jquery - 自定义 jQuery Accordion

Question

为我的网站编写 Accordion 代码。

下面的html代码是饼图的一部分，所以我不得不使用它。 当点击一个按钮时，接下来 li 应该使用类“show”打开。 一个已经打开的里应该被关闭。

知道如何解决这个问题吗？

var acc = $("ul button");
    var panel = $("ul li");


    for (var i = 0; i < acc.length; i++) {
      $(acc[i]).click(function() {

        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          $(this).next().removeClass("show");
        } else {
          $(this).addClass("active");
          $(this).next().addClass("show");

        }

      });
    }

.legend {
  list-style-type: none;
  padding: 0;
  margin: 30px 0 0 0;
  background: #FFF;
  padding: 15px;
  font-size: 13px;
}
.legend li {
  width: 100%;
  height: 200px;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {
  font-style: normal;
}
.legend span {
  float: right;
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
#section1 {
  background-color: cornflowerblue;
}
#section2 {
  background-color: olivedrab;
}
#section3 {
  background-color: orange;
}
#section4 {
  background-color: tomato;
}
#section5 {
  background-color: crimson;
}
button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}
button.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: '\2796';
}
li.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
li.panel.show {
  opacity: 1;
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pieID legend">

  <button class="accordion" id="section1">Section 1</button>
  <li class="panel">
    <em>Horses</em>
    <span>71</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, facilis explicabo soluta magnam similique molestias earum, autem quibusdam cum quod nulla ratione doloribus dolores modi maxime, corrupti quae perferendis quam.</p>
  </li>

  <button class="accordion" id="section2">Section 2</button>
  <li class="panel">
    <em>Dogs</em>
    <span>5</span>
  </li>

  <button class="accordion" id="section3">Section 3</button>
  <li class="panel">
    <em>Cats</em>
    <span>86</span>
  </li>

  <button class="accordion" id="section4">Section 4</button>
  <li class="panel">
    <em>Slugs</em>
    <span>34</span>
  </li>

  <button class="accordion" id="section5">Section 5</button>
  <li class="panel">
    <em>Aliens</em>
    <span>11</span>
  </li>
</ul>

谢谢!

Answer 1

这是较短的版本。您不需要 for 循环 将click 事件 附加到每个按钮。您只需执行一次，jquery 会处理剩下的事情。您也可以使用 toggleClass，它可以优雅地工作。

$('ul.pieID.legend button').on('click', function() {
  $('ul.pieID.legend button.active').removeClass('active');
  $('ul.pieID.legend li').removeClass('show');
  $(this).toggleClass("active");
  $(this).next().toggleClass("show");
});

.legend {
  list-style-type: none;
  padding: 0;
  margin: 30px 0 0 0;
  background: #FFF;
  padding: 15px;
  font-size: 13px;
}
.legend li {
  width: 100%;
  height: 200px;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {
  font-style: normal;
}
.legend span {
  float: right;
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
#section1 {
  background-color: cornflowerblue;
}
#section2 {
  background-color: olivedrab;
}
#section3 {
  background-color: orange;
}
#section4 {
  background-color: tomato;
}
#section5 {
  background-color: crimson;
}
button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}
button.accordion:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
button.accordion.active:after {
  content: '\2796';
}
li.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
li.panel.show {
  opacity: 1;
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pieID legend">

  <button class="accordion" id="section1">Section 1</button>
  <li class="panel">
    <em>Horses</em>
    <span>71</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, facilis explicabo soluta magnam similique molestias earum, autem quibusdam cum quod nulla ratione doloribus dolores modi maxime, corrupti quae perferendis quam.</p>
  </li>

  <button class="accordion" id="section2">Section 2</button>
  <li class="panel">
    <em>Dogs</em>
    <span>5</span>
  </li>

  <button class="accordion" id="section3">Section 3</button>
  <li class="panel">
    <em>Cats</em>
    <span>86</span>
  </li>

  <button class="accordion" id="section4">Section 4</button>
  <li class="panel">
    <em>Slugs</em>
    <span>34</span>
  </li>

  <button class="accordion" id="section5">Section 5</button>
  <li class="panel">
    <em>Aliens</em>
    <span>11</span>
  </li>
</ul>