jQuery проблема при нажатии на страницу - PullRequest
Новая
       49

jQuery проблема при нажатии на страницу

4 голосов
/ 25 июня 2011

Хорошо, я использую этот jQuery здесь: 

$('html').click(function(){
    if ($(".trigger").hasClass("active"))
    {
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
    }
});

$(".panel").click(function(event){
    event.stopPropagation();
});

$(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
});

Хорошо, поэтому в ответе указано, что я должен посетить другой ответ, попробовал это, но это работает только с первой попытки. Если после этого я покажу щелчок по триггеру, а затем по любому месту на странице, он снова не будет работать. Он не может скрыть это все время, когда он виден. Как я могу это исправить?

Итак, когда панель отображается, я бы хотел иметь возможность щелкать за пределами панели, чтобы скрывать ее снова при каждом отображении. Я хотел бы иметь возможность ТОЛЬКО иметь возможность щелкнуть объект class = "trigger", чтобы отобразить и скрыть объект class = "panel", либо снова щелкнув объект class = "trigger", либо щелкнув снаружи. объекта class = "panel" в любом месте страницы.

Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 25 июня 2011 
$('.panel').hide();

$(document).click(function(e){
    var $t = $(e.target);
    if($t.is('.trigger *,.trigger')){
        $(".panel").toggle("fast");
        $t.closest('.trigger').toggleClass("active");
    } else if(!$t.is('.panel *,.panel')){
        $(".panel").hide("fast");
        $('.trigger.active').removeClass("active");
    }
});

проверить здесь: http://jsfiddle.net/5fU3v/2/

0 голосов
/ 25 июня 2011

Вы можете остановить распространение события в обработчике click, который вы зарегистрировали в триггере, затем зарегистрировать другой обработчик click в элементе html и использовать селектор : visible , чтобы определить, является ли панель скрыто или нет: 

$(document).ready(function() {
    $(".trigger").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
    });

    $("html").click(function() {
        var $panel = $(".panel:visible");
        if ($panel.length) {
            $panel.hide("fast");
            $(".trigger").removeClass("active");
        }
    });
});
...