オープン/クローズアイコン付きスーパーシンプルアコーディオンメニュー

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

あなたはアイコンを表示/非表示に言及したが、最後に、あなたが本当にどのように上のガイドたかった：

「アコーディオン 状態と相互作用する親アイテムにクラスを追加/削除」

を

したがって、クラスを使用して、クリックした親アイテムに「折り畳み」アイコンと「展開済み」アイコンを交換して表示することを前提としています。

EDIT：あなたの説明に基づいて、コードを修正しました。あなたがアコーディオンのためのjQuery UIを使用している

$(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>