CSS切換效果

Question

我的網站導航需要幫助。以下是當前代碼的鏈接：http://jsfiddle.net/Sharon_J/cf2bm0vs/

現在發生的情況是，當您點擊'Plus'標誌時，將顯示該類別下的子菜單，但該標誌保持原樣。點擊後，'Plus'標誌應該變成'減號'。我試圖應用JavaScript來獲得效果，但它不起作用。任何人都可以提出建議

下面的代碼可以以某種方式修改爲所需的效果嗎？

.toggle, [id^=drop]{ 
display: none; 
} 

[id^=drop]:checked + ul{ 

    display:block; 

} 

Answer 1

這裏是你的解決方案，請檢查jsfiddle。 http://jsfiddle.net/cf2bm0vs/3/

添加這個腳本：

$('.toggle').not('.tog1').on('click',function(){ 
    if($(this).hasClass('open')){ 
     $(this).removeClass('open'); 
     $(this).html('+'); 
    }else{ 
     $(this).addClass('open'); 
     $(this).html('-'); 
    } 
}) 

Answer 2

你可以試試這個：

$('.toggle').click(function() { 
    $('.tog1').toggleClass('toggled'); 
}); 

DEMO FIDDLE