Question

这就是我想要完成的事情。我有一个关于我们的div按钮打开了一个关于我们的页面。我想禁用关于我们的div按钮，以便用户无法点击它，除非使用关闭按钮关闭about us页面。请检查下面我的尝试。单击关闭按钮后，无法再单击关于我们的div按钮。

    $(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

以下是可行的代码

<强> HTML

<a href="#" class="btn_about">About Us</a>

<div id="content">About Us content
<div class="close"><a href="#">Close Button</a></div>
</div>

<强> CSS

#content { display:none;}

<强>代码

$('.btn_about').on('click', function(e){
    e.preventDefault();
    if( !$(this).is('.active') ){
        alert('Hi');
        $('#content').fadeIn();
        $(this).addClass('active');
    }
});

$('.close').click(function(){
    $('#content').fadeOut();
    $('.btn_about').removeClass('active');

});

<强> Fiddle Demo

Answer 2

单击按钮并且永远不会重新附加新按钮时，

.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事件的选择器包含类，以便在删除类时不会触发。

Answer 3

在if / else语句中使用preventDefault（）和btn变量

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

        btn = 'on';
    }else{
        // Stops Default Button Action
        e.preventDefault();
    }

});

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

        btn = 'off';
    }else{
        // Stops Default Button Action
        e.preventDefault();
    }
});

单击Jquery On和Off按钮

3 个答案: