Question

作为网站的一部分，我正在尝试设计我有一个id为“powersettings”的div，当点击它切换id为“powermenu”的div并在我的“content”div上切换类“blur” “tab a”，这一切都成功完成了。

当点击“powersettings”时，我正试图让我的“标签”解除绑定（点击），这是成功的。但是，当再次点击“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-向if的{{1}}添加click()统计数据：

#tab a

工作原理：当您在$('#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); });'点击（#powermenu）时切换$("#powermenu").toggle();的可见度（#powersettings）。您似乎希望隐藏$("#powersettings").click(function () {...时#tab a点击无效。这段代码就是这样做的。

JQuery切换unbind / bind

2 个答案: