CSS切换效果

Question

I have need help with the navigation for my site. Here's the link to the current code: http://jsfiddle.net/Sharon_J/cf2bm0vs/

What happens now is that when you click on the 'Plus' sign the sub menus under that category are shown but the sign remains as it is. The 'Plus' sign should turn in to 'Minus' on click. I have tried to apply JavaScript to get the effect, but its not working. Can anyone suggest something?

Can the following code be somehow modified for the required effect?

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

[id^=drop]:checked + ul{

    display:block;

}

Answer 1

here is your solutions please check jsfiddle. http://jsfiddle.net/cf2bm0vs/3/

add this script :

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

Answer 2

you can try this one:

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

DEMO FIDDLE