JQuery Toggles Without Tying / Linking

As part of a site I'm trying to design I have a div with the id "powersettings" when clicked it toggles a div with the id "powermenu" and toggles the class "blur" on my "content" div and "tab a"s, this is all done successfully.

I'm trying to make my "tab a"s unbind(click) when "powersettings" is clicked, this is successful. However I want it to bind(click) when "powersettings" is clicked again to close the "powermenu"...can anyone tell me how to do this?

My relevant jQuery code:

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

Thanks

Andrew

Update 1: ("#tab a") relates to code that changes my divs content based on menu selection:

$('#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);});

Update 2: as requested heres my html code for the divs and power menu

<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>

Above is the HTML Code for the tabs and menu links. The power menu is simply a with the id and class "powermenu" as I haven't added anything to the div yet.

As function .toggle(fn1, fn2...) deprecated (See: http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead )

You can do like this:

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

Here is a fiddle( http://jsfiddle.net/android/3U4sK/1/ ).

As your updated code, the foo function should like this:

function foo(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
}
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章