jQuery在单击另一个div时停用一个div上的click事件

我目前正在制作一个网站，我有两个可点击的div“#colorsettings”和“#powersettings”都成功地解除了菜单（“选项卡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>

。。。
...

---

您有几个元素带有

id=“tab”

，不要这样做<代码>$（“#选项卡”）将仅选择一个节点。如果不需要ID，只需使用类：

$（'.tab'）

或

$（'.menu.tab'）

如果我理解正确：您正试图“禁用”带有自定义单击处理程序的链接。
一种方法是使用标记类（例如：

禁用

），并让处理程序检查该类是否存在：

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
});

---

有几个元素带有

id=“tab”

，请不要这样做<代码>$（“#选项卡”）将仅选择一个节点。如果不需要ID，只需使用类：

$（'.tab'）

或

$（'.menu.tab'）

如果我理解正确：您正试图“禁用”带有自定义单击处理程序的链接。
一种方法是使用标记类（例如：

禁用

），并让处理程序检查该类是否存在：

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
});

---

尝试禁用并启用单击div：

---

尝试禁用并启用单击div：

---

我不确定我是否正确理解了你的需求，但我仍然试图帮助你。如果您的需求得到满足，请参见下面的链接

//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);
}

---

我不确定我是否正确理解了你的需求，但我仍然试图帮助你。如果您的需求得到满足，请参见下面的链接

//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);
}

---

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

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

将以下内容添加到

$（“#颜色设置”）的开头。单击
功能：

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

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

然后，将其添加到
$（“#powersettings”）的开头。单击
功能：

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

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

看小提琴：

然后对另一个按钮执行同样的操作

但最重要的是要记住。。。ID每页只有一次！！；-）
 如前所述，您在标记中多次使用id。id每页只能使用一次

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

将以下内容添加到
$（“#颜色设置”）的开头。单击
功能：

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

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

然后，将其添加到
$（“#powersettings”）的开头。单击
功能：

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

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

看小提琴：

然后对另一个按钮执行同样的操作

但最重要的是要记住。。。ID每页只有一次！！；-）
 你为什么不在每个按钮上切换“禁用”？啊，也许它们不是。它们不是。它们只是可点击的按钮。你为什么不在每个按钮上切换禁用？啊，也许它们不是。它们不是。它们只是可点击的分区。它们不是按钮元素。修改answer@RajeevNair-当我将“$”（“#powersettings'）.off”分配给if clicked 1时，它可以禁用另一个按钮，但在我使用“$”（“#powersettings'）.on”时不会重新激活它。它们不是button ElementsOry@Nigel。修改answer@RajeevNair-当我将“$”（“#powersettings”）.off”分配给if clicked 1时，它会禁用另一个按钮，但当我使用“$”（“#powersettings”）.on时不会重新激活它。当另一个按钮被单击/取消单击时，我会尝试禁用并重新启用可单击的divs“#powersettings”和“#colorsettings”。“选项卡a”的解除绑定/重新绑定已正常工作。我正在尝试在单击/解除另一个选项卡时禁用并重新启用可单击的div“#powersettings”和“#colorsettings”。“#选项卡a”的解除绑定/重新绑定已正常工作。它在取消激活和重新激活可单击div时确实有效，但它阻止了选项卡的停用。好的。。让我查一下again@aw555000：：更新答案。请检查它在取消激活和重新激活可点击div时是否起作用，但它阻止了选项卡的停用。好的。。让我查一下again@aw555000：：更新答案。请检查我是否知道我的多重身份问题。我将它从“addClass”更改为“toggleClass”，它在“#coloursettings”菜单上按预期工作，但在应用于“#powersettings”菜单时不起作用。如果您要创建更新的小提琴，我会查看它。我知道我的多ID问题。我将它从“addClass”更改为“toggleClass”，它在“#coloursettings”菜单上按预期工作，但在应用到“#powersettings”菜单时不起作用。如果您要创建更新的小提琴，我将查看它。