Закрыть меню с помощью щелчка в любом месте - PullRequest
Новая
       0

Закрыть меню с помощью щелчка в любом месте

3 голосов
/ 20 июля 2011

Как вы, ребята, видите, у меня есть выпадающее меню.

У меня много столбцов, у каждого есть возможность открыть меню. 

$(".optionCont").live("click", function(){
    $(".dropMenuCont").slideUp();
    if ($(this).next().css("display") == "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
});

Итак,как я могу сделать слайд меню, когда я щелкаю в любом месте страницы?

Как щелчок документа?

Я посещал другие темы, но не знаю почему, это не такза работой.Может быть, я делаю это по-другому.

Я принимаю любые советы по кодированию меню.

Демонстрация: Jsfiddle

Ответы [ 5 ]

8 голосов
/ 20 июля 2011

Зарегистрируйте одноразовый обработчик внутри обратного вызова, чтобы убедиться, что следующий щелчок закрывает меню: 

$(".optionCont").live("click", function(ev){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    ev.stopPropagation();

    $(document).one('click', function() {
             $(".dropMenuCont").slideUp();

    });
});

См. http://jsfiddle.net/alnitak/GcxMs/

1 голос
/ 20 июля 2011 
$(".optionCont").click(function(e){
    $(".dropMenuCont").slideUp();
    if($(this).next().css("display") == "none"){
        $(this).next().slideDown();
    }else{
        $(this).next().slideUp();
    }
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).click(function() {
     $(".dropMenuCont").slideUp();
});

Вот JSFiddle

1 голос
/ 20 июля 2011

Попробуйте что-то вроде: 

$(document).click(function(e) {
   if ($(e.target) != myEl)
       myEl.slideUp();
})

Альтернатива: рабочий пример .

Источник: 

$(".optionCont").live("click", function(e) {
    var that = this;
    $(document).click(function(e) {
        console.log(e.target);
        console.log(that);
        if (e.target != that) {
            e.stopPropagation();
            e.preventDefault();
            $(".dropMenuCont").slideUp();
        }
    });
    if ($(this).next().css("display") === "none") {
        $(this).next().slideDown();
    } else {
        $(this).next().slideUp();
    }
    e.stopPropagation();
    e.preventDefault();
});
0 голосов
/ 20 июля 2011

Просто привяжите клик к <body>

$('body').click(function() {
  $(".dropMenuCont").slideUp();
});

$('.dropMenuCont').click(function(e){
  e.stopPropagation();
});
0 голосов
/ 20 июля 2011 
$('body').bind("click",function (){
    $(".dropMenuCont").slideUp();
});
$('.dropMenuCont').click(function(event){
    event.stopPropagation();
});

Я думаю, что лучшая идея проверить, скрыто ли что-то, состоит в том, чтобы переключить класс в вашем меню в обратном вызове анимации, а затем проверить его с помощью hasClass.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...