jQuery скрыть выпадающее меню при нажатии, но меню

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

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

$(document).click(function(event) { 
    if ($(event.target).parents().index($('.notification-container')) == -1) { 
     if ($('.notification-container').is(":visible")) { 
      $('.notification-container').animate({ 
       "margin-top": "-15px" 
      }, 75, function() { 
       $(this).fadeOut(75) 
      }); 
     } else { 
      //This should only show when you click: ".notification-button" not document 
      $('.notification-container').show().animate({ 
       "margin-top": "0px" 
      }, 75); 
     } 
    } 
});

источник

2012-01-10 Dylan Cross

Опишите свой код; Он связывает событие клика со всем «документом», и когда это событие запускается, он проверяет, имеет ли элемент target (clicked) какие-либо родители с классом «.notification-container», и если он это проверяет, будет ли какой-либо элемент с этим классом видно. Если это так, он скрывает (анимирует) все элементы с классом «.notification-container», и в противном случае он отображает (анимирует) их. – Stefan

Лучшее решение - [stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element][1]. [1]: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element – lightofsouls

эй человек, не могли бы вы принимать ответ? :) – epoch

Это то, что я решил использовать, это хороший плагин jQuery, который работает с небольшим кодом.

Вот плагин: http://benalman.com/projects/jquery-outside-events-plugin/

Это код, который делает мой выше код в моем вопросе работы.

$(document).ready(function(){ 
    $(".notification-button").click(function(){ 
     $('.notification-container').toggle().animate({"margin-top":"0px"}, 75); 
    }); 

    $('.notification-wrapper').bind('clickoutside', function (event) { 
     $('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)}); 
    }); 
});

источник

2012-01-10 20:42:08

Я обычно делаю так:

$('.drop-down').click(function() { 
    // The code to open the dropdown 

    $('body').click(function() { 
     // The code to close the dropdown 
    }); 
});

Так положить тело (в другом месте) нажмите функцию внутри функции открыт клик раскрывающимся.

источник

2012-01-10 08:48:00

Это похоже на то же, что и мой текущий код, странно.Но спасибо –

closest() функция JQuery можно использовать, чтобы увидеть, если щелчок не в меню:

$('body').click(function(e) { 
    if ($(e.target).closest('.notification-container').length === 0) { 
     // close/animate your div 
    } 
});

источник

2012-01-10 08:48:50 epoch

Мне не удалось заставить это работать должным образом, он делает то же самое, что и с моим текущим кодом –

Это просто и хорошо работает. Вы можете захотеть добавить событие click в html вместо тела, если ваша страница не заполняет всю высоту окна просмотра. –

это отлично работает :) – mshahbazm

попробовать что-то вроде:

$(document).click(function(event) { 

if($(event.target).parents().index($('.notification-container')) == -1) { 
    if($('.notification-container').is(":visible")) { 
     $('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)}); 
    } 
}   
}); 

$(".notification-button").click(function(event){ 
    event.stopPropagation(); 
    $('.notification-container').show().animate({"margin-top":"0px"}, 75); 
});

источник

2012-01-10 08:49:29 redmoon7777

Да, я пробовал это, он вообще не работает. –

странно. если вы могли бы разместить соответствующие части своего кода по адресу http://jsfiddle.net/, было бы намного проще понять это. – redmoon7777

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

$(':not(#country)').click(function() { 
    $('#countrylist').hide(); 
});

источник

2012-01-10 09:15:26

Я делал это раньше, но он никогда не работал точно. –

Попробуйте th является:

// The code to close the dropdown 
$(document).click(function() { 
    ... 
}); 

// The code to open the dropdown 
$(".drop-down").click(function() { 
    ... 
    return false; 
});

источник

2012-01-10 09:42:03

Это не может быть полным решением, но I've создал demo, чтобы помочь вам. Позвольте мне знать, что он не работает так, как вы ожидали.

$(document).click(function(e) { 

    var isModalBox = (e.target.className == 'modal-box'); 

    if (!isModalBox) { 
     $('.modal-box:visible').animate({ 
      "margin-top": "-15px" 
     }, 75, function() { 
      $(this).fadeOut(75); 
     }); 
    } 
}); 

$('a').click(function(e) { 
    e.stopPropagation(); // Important if you´d like other links to work as usual. 
}); 

$('#temp-button').click(function(e) { 
    e.preventDefault(); 
    $('.modal-box').show().animate({ 
     "margin-top": "0px" 
    }, 75); 
});

источник

2012-01-10 10:19:26 Stefan

Это похоже на работу в вашей демонстрации скрипки, спасибо. Но я нашел плагин, который отлично работает, с меньшим количеством кода, я отправлю его в качестве своего ответа. –

Я использую очень простой код для этого, как: -

$(document).click(function(e){ 

    if($(e.target).closest('#dropdownID').length != 0) return false; 
    $('#dropdownID').hide(); 
});

Надеется, что это будет полезно.

Спасибо!

источник

2013-03-29 10:36:58

jQuery скрыть выпадающее меню при нажатии, но меню

ответ

Смежные вопросы