JQuery 切换取消绑定/绑定

Question

作为我正在尝试设计的网站的一部分，我有一个 id 为“powersettings”的 div，单击它会切换一个 id 为“powermenu”的 div，并在我的“内容”div 上切换类“blur”和"tab a"s，这一切都成功了。

当点击“powersettings”时，我试图让我的“tab a”解除绑定（点击），这是成功的。但是，当再次单击“powersettings”以关闭“powermenu”时，我希望它绑定（单击）...谁能告诉我该怎么做？

我的相关 jQuery 代码：

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    $("#tab a").unbind("click")
});

谢谢

安德鲁

更新 1：("#tab a") 涉及根据菜单选择更改我的 div 内容的代码：

$('#tab a').click(function(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
});

function hideContentDivs(){
    $('.main #content').each(function(){
       $(this).hide();
    });
}
    hideContentDivs();
    $('.main #content').eq(0).fadeIn(2000);});

更新 2：根据要求，这是我的 div 和电源菜单的 html 代码

<div class="menu">
<div class="tab" id="tab"><a href="#">Home</a></div>
<div class="tab" id="tab"><a href="#">Page 1</a></div><div class="tab" id="tab"><a href="#">Page 2</a></div>
<div class="tab" id="tab"><a href="#">Page 3</a></div>
</div>

上面是标签和菜单链接的 HTML 代码。电源菜单只是一个带有 id 和类“powermenu”的简单菜单，因为我还没有向 div 添加任何内容。

Answer 1

作为函数 .toggle(fn1, fn2...) 已弃用（参见：http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead）

你可以这样做：

var clicked = true;
$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        $('#tab a').off('click',foo);
        clicked = false;
    }
    else {
        $('#tab a').on('click',foo);
        clicked = true;
    }
});

这是一个小提琴（http://jsfiddle.net/android/3U4sK/1/）。

作为你更新的代码，foo 函数应该是这样的：

function foo(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
}

Answer 2

这需要对您的代码进行一些小的更改，但应该可以解决。

1- 删除 unbind() 行，因为它不再需要：

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    // $("#tab a").unbind("click") // remove this line
});

2- 在#tab a 的click() 中添加一个if 语句：

$('#tab a').click(function(e) {
    if ($("#powermenu").is(':visible')) {
        return; // if #powermenu is not visible, do nothing (quit the function)
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(2000);
});

工作原理：当您在#powersettings'点击 ($("#powersettings").click(function () {...) 时切换 #powermenu 的可见性 ($("#powermenu").toggle();)。您似乎希望#tab a 的点击无效，而#powermenu 被隐藏。这段代码就是这样做的。