使用CSS切換內容

Question

我有一個手風琴切換菜單，目前沒有太多的工作。你點擊它並打開和關閉。但是，我希望它在關閉時顯示「+」，打開時顯示「 - 」。目前第一個手風琴默認打開並顯示一個X，第二個默認爲+，但在打開和關閉時不會改變。

目前的代碼看起來像

   <h2 class="accordion-toggle accordion-active">HeaderText</h2> 
       <div class="accordion-content default"> 
        AccordionText 
       </div> 

       <h2 class="accordion-toggle">Headertext2</h2> 
       <div class="accordion-content"> 
        AccordionText2 
       </div> 
      </div> 
     </section> 

和CSS看起來像

#solution-accordion .accordion-toggle:after { 
content: "+"; 
position: absolute; 
right: 0; 
-webkit-transform: rotate(0); 
-ms-transform: rotate(0); 
transform: rotate(0); 
-webkit-transition: all 500ms ease; 
transition: all 500ms ease; 
} 

#solution-accordion .accordion-toggle.accordion-active:after { 
content: "+"; 
position: absolute; 
right: 0; 
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transition: all 500ms ease; 
transition: all 500ms ease; 
-webkit-transform-origin: middle center; 
-ms-transform-origin: middle center; 
transform-origin: middle center; 
} 

只有爵士手風琴是

$('#solution-accordion').find('.accordion-toggle').click(function(){ 
    //Expand or collapse this panel 
    $(this).next().slideToggle(500); 
    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp(500); 
}); 

代碼是切換菜單

// solution page accordion 
    $('#solution-accordion').find('.accordion-toggle').click(function(){ 
    //Expand or collapse this panel 
    $(this).next().slideToggle(500); 
    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp(500); 
    }); 

這裏是我爲它http://jsfiddle.net/WteTy/151/

我沒有在這個項目上的UI開發人員創建了一個小提琴，我只是應該做的遷移，但是這是指出，我想爲他們解決它。謝謝

Answer 1

整個過程中的某些事情應該只在擴展的手風琴項目上設置「手風琴活躍」類。它看起來像打算在摺疊時顯示「+」，打開時顯示「x」。您可以將CSS中的「x」更改爲「 - 」並移除45度的旋轉角度。

無論採用哪種方式，我都會先解決他們正在嘗試添加的手風琴活動課程。

添加從所有其他元素中刪除類，然後添加它，如果它應該在那裏只爲擴展的那個。

的jsfiddle：http://jsfiddle.net/330nb5hk/1/

$('#solution-accordion').find('.accordion-toggle').click(function(){ 
    //Expand or collapse this panel 
    $('.accordion-toggle').removeClass("accordion-active"); 
    if($(this).next().is(":hidden")) { 
     $(this).addClass("accordion-active"); 
    } 
    $(this).next().slideToggle(500); 
    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp(500); 
    });