超简单的手风琴菜单打开/关闭图标

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>