当单击另一个 div 时，jQuery 在一个 div 上停用单击事件

Question

我目前正在制作一个网站，我有 2 个可点击的 div“#coloursettings”和“#powersettings”都成功解除了菜单的绑定(bind)(“#tab a”)，但我希望每个可点击的 div 都停用另一个，然后重新激活- 再次单击时激活它。我已经尝试将相应的 ID 输入到取消绑定(bind)/绑定(bind)“#tab a”的相同方法中，但它不会停用其他可点击的 div。任何人都可以帮助完成这项工作吗？

//Colour Settings Menu//
var clicked1 = true;
$("#coloursettings").click(function() {
    $("#colourselect").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked1) {
        $("#tab a").unbind("click", foo);
        clicked1 = false;
    }
    else {
        $("#tab a").click(foo);
        clicked1 = true;
    }       
});

//Power Menu//
var clicked = true;
$("#powersettings").click(function() {
    $("#powermenu").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked) {
        $("#tab a").unbind("click", foo);
        clicked = false;
    }
    else {
        $("#tab a").click(foo);
        clicked = true;
    }       
});

相关的 HTML

<div class="icon" id="coloursettings">...</div>
<div class="icon" id="powersettings">...</div>

Here's a link to my JSFiddle

Answer 1

我不确定我是否正确理解了您的需求，仍然尽力帮助您。如果您的需求是否得到满足，请查看以下链接..

//Colour Settings Menu//
var clicked1 = false;
$("#coloursettings").click(function () {
    if (clicked) {
        return;
    }
    $("#colourselect").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked1) {
        //$("#tab a").unbind("click", foo);
        clicked1 = false;
    } else {
        //$("#tab a").click(foo);
        clicked1 = true;
    }
});
//Power Menu//
var clicked = false;
$("#powersettings").click(function () {
    if (clicked1) {
        return;
    }
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        //$("#tab a").unbind("click", foo);
        clicked = false;
    } else {
        //$("#tab a").click(foo);
        clicked = true;
    }
});
//foo
function foo(e) {
    if(clicked || clicked1)
    {
        return;
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(1000);
}

See This