超簡單的手風琴菜單打開/關閉圖標

Question

我使用簡單的手風琴，完美的作品，唯一的需要是顯示打開/關閉圖標。不知道如何添加/刪除類將與手風琴狀態交互的父項目，所以需要你的幫助。

<!-- JS --> 
<script type="text/javascript"> 
$(document).ready(function($) { 
$('#accordion').find('.accordion-toggle').click(function(){ 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

}); 
}); 
</script> 

<!-- CSS --> 
<style> 
.accordion-toggle {cursor: pointer;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;} 
</style> 

<!-- HTML --> 
<div id="accordion"> 
<h4 class="accordion-toggle">Accordion 1</h4> 
<div class="accordion-content default"> 
<p>Cras malesuada ultrices augue molestie risus.</p> 
</div> 
<h4 class="accordion-toggle">Accordion 2</h4> 
<div class="accordion-content"> 
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
</div> 
<h4 class="accordion-toggle">Accordion 3</h4> 
<div class="accordion-content"> 
<p>Vivamus facilisisnibh scelerisque laoreet.</p> 
</div> 
</div> 

Answer 1

你提到隱藏/顯示圖標，但在最後，你真的想了解如何指南：

「添加/刪除類的父項將與手風琴 狀態交互」

因此，我假設您打算使用類來交替地顯示一個'摺疊'和'擴展'圖標到單擊父項目。

編輯：根據你的說明，我修改了代碼。請參閱下面的示例代碼：

$(document).ready(function($) { 
 

 
//adds the "collapsed" class to each parent 
 
$('#accordion .accordion-toggle').addClass('collapsed'); 
 

 
$('#accordion').find('.accordion-toggle').click(function(){ 
 
    //Expand or collapse this panel 
 
    $(this).next().slideToggle('fast'); 
 
    
 
    //toggles between collapsed and expanded classes 
 
$(this).toggleClass('collapsed expanded'); 
 
    
 
    //removes any instance of "expanded" from the other parents and replace it with the "collapsed" class 
 
    $("#accordion .accordion-toggle").not($(this)).removeClass('expanded').addClass('collapsed'); 
 
    
 
    //Hide the other panels 
 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 
 

 
}); 
 
});

.expanded { 
 
    background:red; 
 
} 
 

 
.collapsed { 
 
    background:blue; 
 
} 
 
.accordion-content:not(.default) { 
 
    display:none; 
 
} 
 
h4 { 
 
    cursor:pointer; 
 
} 
 
/* the css below is unnecessary for the accordion, but just to prevent the vertical scrollbars from showing up using stackoverflow's code screen */ 
 
body { 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="accordion"> 
 
<h4 class="accordion-toggle">Accordion 1</h4> 
 
<div class="accordion-content default"> 
 
<p>Cras malesuada ultrices augue molestie risus.</p> 
 
</div> 
 
<h4 class="accordion-toggle">Accordion 2</h4> 
 
<div class="accordion-content"> 
 
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p> 
 
</div> 
 
<h4 class="accordion-toggle">Accordion 3</h4> 
 
<div class="accordion-content"> 
 
<p>Vivamus facilisisnibh scelerisque laoreet.</p> 
 
</div> 
 
</div>