JQuery тумблер unbind/bind

Как часть сайта, который я пытаюсь создать, у меня есть div с идентификатором "powersettings", при нажатии на него переключается div с идентификатором "powermenu" и переключается класс "blur" на моих "content" div и "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: по запросу здесь мой HTML-код для меню div и питания

<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-код для вкладок и ссылок меню. Меню питания просто с идентификатором и классом "powermenu", так как я еще ничего не добавил в div.

Источник

2 ответа

Решение

Как функция.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);
}
Источник

Это требует небольшого изменения в вашем коде, но должно решить.

1- Удалить unbind() строка, так как больше не будет необходимости:

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

2- Добавить if в соответствии с 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клики не имеют никакого эффекта, пока #powermenu скрыт. Этот код делает это.

Источник
Другие вопросы по тегам