jQuery - переключать панель при закрытии по нажатию на внешний элемент, только если панель видна

Question

Я работаю на этом сайте: http://dev.rjlacount.com/treinaAronson/index.php

Мое последнее задание - настроить панель контактов (которую можно увидеть, если щелкнуть верхнюю левую кнопку «контакт»), чтобы она закрывалась, если она в данный момент открыта, и пользователь либо щелкает за пределами панели (в «#» области содержимого) или нажимает клавишу esc.

Я подумал, что щелчок в триггере #content area будет проще, поэтому я начал с этого. Я прочитал несколько веток о функциях запуска, только если элементы видимы, но то, что я до сих пор придумал, вообще не работает:

$("#panel").is(":visible") {
  $("#content").click(function(){
    $("#panel").slideToggle("3000");
  });
};

Это нарушает функциональность кнопки контакта, и я попробовал несколько вариантов этого, но безрезультатно. Я делаю какие-либо явные ошибки здесь? Любой совет будет принята с благодарностью.

Спасибо!

Answer 1

Привязка к документу функций Click и Keydown и следит за тем, чтобы функция click не всплывала на документе при нажатии на панель или переключающие кнопки. Вот так:

$(document).bind({
    keydown:function(e) {
        if (e.keyCode == 27 ) {
            $("#panel").slideUp("3000");
        }
    }, click: function(e) {
        $("#panel").slideUp("3000");
    }
});
$('#flip, #panel').bind('click', function(e){return false});

Answer 2

Почему бы вам не добавить класс в тело страницы, когда панель открыта, и удалить его, когда она закрыта? Это делает это намного проще:

$('.class #content').click(function(){
// Close the contact panel
});

Теперь, когда у тела есть класс 'class', любой щелчок по элементу #content автоматически закроет контакт.

Имеет смысл? Кстати, отличный сайт.

Answer 3

$('#flip').bind('click', function(){
    $(this).toggleClass('contactOpen');
    $("#panel").slideToggle("3000");
});

$('#content').bind('click', function(){
    if($('#flip').hasClass('contactOpen')){
        $(this).toggleClass('contactOpen');
        $("#panel").slideToggle("3000");
    }
});