自定義jQuery的手風琴

Question

編碼爲我的網站的手風琴。

以下html代碼是餅圖的一部分，所以我不得不使用它。 單擊下一個li按鈕時，應該使用「show」類打開。 已關閉的li應已關閉。

任何想法如何解決這個問題？

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

我找到了解決方案！

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 2

下面是較短的版本。您不需要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 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"); 
     } 
    }); 
}