Question

我目前正在制作一个网站，我有2个可点击的div“#coloursettings”和“#powersettings”都成功解除了绑定菜单（“＃tab a”）但我希望每个可点击的div停用另一个，然后重新 - 再次单击时激活它。我已经尝试将相应的ID输入到取消绑定/绑定“#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

Answer 2

您有多个id="tab"元素，请勿这样做。 $('#tab')只会选择一个节点。如果您不需要ID，只需使用类：$('.tab')或$('.menu .tab')。

如果我理解正确：您正在尝试使用自定义点击处理程序“禁用”a个链接一种方法是使用标记类（例如：disabled）并让您的处理程序检查该类是否存在：

var clicked1 = false;
$("#coloursettings").click(function(){
     ...
     clicked1 = !clicked1;
     $('.menu .tab a').toggleClass('disabled', clicked1);
});

// in your $('.menu .tab a').click() handler :
$('.menu .tab a').click(function(){
    if ( $(this).hasClass('disabled') ){
        return; // don't do anything if disabled
    }

    //otherwise : do stuff
});

Answer 3

如前所述，您在标记中多次使用id。每页只能使用一次id。

也就是说，要在jquery中禁用“按钮”，请执行以下操作：

将以下内容添加到$("#coloursettings").click功能的开头：

 $("#powersettings").addClass("disabled");

然后，将其添加到$("#powersettings").click函数的开头：

 if ($(this).hasClass("disabled")) {
    exit;
 }

请参阅小提琴：http://jsfiddle.net/6W5Hv/3/

然后对另一个按钮做同样的事情。

但最重要的是要记住...... ID每页只有一次!! ; - ）

Answer 4

尝试禁用并启用单击div：

Disable div click events

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

4 个答案: