Question

为我的网站编写手风琴。

以下html代码是饼图的一部分，所以我被迫使用它。点击下一个按钮时，li应该使用class＆＃34; show＆＃34;打开。已经打开的李应该关闭。

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

＆＃13;

\b

＆＃13;

with open("test.pbm", 'r') as f:
    image = f.readlines()

with open("newfile.pbm", "w") as f:
    f.writelines(image[:3])   # rewrite the header with no change
    for line in image[3:]:    # expand the remaining lines
        f.write(' '.join(line))

＆＃13;

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");

        }

      });
    }

＆＃13;

谢谢！

Answer 1

这是较短的版本。您不需要for loop将click event附加到每个button。你可以这样做一次，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>

Answer 2

我找到了解决方案！

var acc = $("ul button");


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

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

                }

                 else {
                    $(this).addClass("active");
                    $(this).next().addClass("show");

                    }   
                });
        }

Answer 3

我想你也可以这样做---

var acc = $("ul button");
var panel = $("ul li");
for(var i = 0; i < acc.length; i++) {
    $(acc[i]).click(function() {    
        acc.removeClass("active");
        panel.removeClass("show");

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

定制jQuery手风琴

3 个答案: