单击 div 时添加类答案

【问题标题】：add class when click on a div单击 div 时添加类
【发布时间】：2013-05-11 15:59:57
【问题描述】：

我正在尝试制作一个带有导航菜单的侧边栏，当我单击 div 时该菜单会展开/折叠。

$(document).ready(function() {     
$('.btn-nav').click(function(){     
    $('.sidebar').addClass('expand');    
},     
function(){    
    $('.sidebar').removeClass('collapse');     
});
});

当我将点击功能替换为悬停功能时，它可以正常工作。但是现在不行了。有谁知道我做错了什么？

【问题讨论】：

点击需要一个功能，而不是两个。

标签： jquery sidebar expand collapse

【解决方案1】：

你需要这样做：

$(document).ready(function () {
    $('.btn-nav').click(function () {
        $('.sidebar').toggleClass('expand').toggleClass('collapse');
    });
});

如果你看一下click() API Documentation，你会发现它只需要一个函数，但hover() 需要一个或两个处理函数，当鼠标指针进入和离开元素时执行。

【讨论】：

或$('.sidebar').toggleClass('expand collapse');

【解决方案2】：

点击事件没有参数。您可以使用以下代码，

$(document).ready(function() {
    var testMethod = function(event){
        if(event.data.flg == 0){
             $('.sidebar').addClass('expand');
             event.data.flg=1;
        }
        else {
            $('.sidebar').removeClass('collapse'); 
            event.data.flg=0;
        }
    };


    $('.btn-nav').on('click', {flg: 0}, testMethod);
});

【讨论】：