Question

我需要有关我网站导航的帮助。以下是当前代码的链接：http://jsfiddle.net/Sharon_J/cf2bm0vs/

现在发生的是，当您点击“加号”符号时，会显示该类别下的子菜单，但符号保持不变。单击时，“加号”符号应变为“减号”。我试图应用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

CSS切换效果

2 个答案: