Jquery 打开和关闭按钮单击

Question

这就是我想要完成的。我有一个关于我们的按钮，可以打开关于我们的页面。我想禁用关于我们的 div 按钮，这样用户就不能点击它，除非使用关闭按钮关闭关于我们的页面。请在下面检查我的尝试。点击关闭按钮后，关于我们的div按钮就不能再点击了。

请检查 JSfiddle http://jsfiddle.net/jvaHb/

    $(document).ready(function(e) {
    $('#btn-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-social').off('click');
    });
    $('#btn-close-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-social').on('click');
    });

    $('#btn-close-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-about').on('click');
    });

    $('#btn-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        $('#btn-about').off('click');

    });
    });

Answer 1

.off('click') 在单击按钮时分离 #btn-about 和 #btn-social 上的所有单击处理程序并且永远不会重新连接新的。 (无论如何，您不想一遍又一遍地分离和重新连接它们)。

有很多方法可以解决这个问题。由于您不想隐藏按钮，一种选择是简单地使用一个变量来指示每个按钮是否应该可单击...

$(document).ready(function(e) {

    var isBtnSocialClickable = true;

    $('#btn-close-social').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        isBtnSocialClickable = true;
    });

    $('#btn-social').click(function(){
        if (isBtnSocialClickable) {
            var this_item = $(this).attr("data-item");
            $('.content-item').hide();
            $('.fade-container-' + this_item).fadeIn(2000);
            isBtnSocialClickable = false;
        }
    });

    var isBtnAboutClickable = true;

    $('#btn-close-about').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.fade-container-' + this_item).fadeIn(2000);
        isBtnAboutClickable = true;
    });

    $('#btn-about').click(function(){
        if (isBtnAboutClickable) {
            var this_item = $(this).attr("data-item");
            $('.content-item').hide();
            $('.fade-container-' + this_item).fadeIn(2000);
            isBtnAboutClickable = false;
        }
    });
});

执行此操作的其他方法是启用/禁用按钮，或者在按钮上添加和删除一个类，并让 onclick 事件的选择器包含该类，这样它就不会在类被删除时触发。