Закрыть переключатель, щелкнув в другом месте?

#jquery #toggle

#jquery #переключение

Вопрос:

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

 $(document).ready(function() {
       $('a.show_hide').click(function() {
           $('.hidden-menu').toggle();
           $(this).toggleClass('close');
       });
   }); 
 

Ответ №1:

это то, что вам нужно: http://jsfiddle.net/5jzUD/9 /

 $(document).ready(function() {

    $(document).on('click',function(clickPosition){
        if (!$('.hidden-menu, a.show_hide').is(clickPosition.target)    amp;amp; $('.hidden-menu').has(clickPosition.target).length === 0){
            $('.hidden-menu').hide();
           $('a.show_hide').addClass('close');
            }
        else{
            if($('a.show_hide').is(clickPosition.target) amp;amp; $('.hidden-menu').css('display')!='none'){
                $('.hidden-menu').hide();
               $('a.show_hide').addClass('close');
                return;
            }
            $('.hidden-menu').show();
           $('a.show_hide').removeClass('close');
        }
    });
}); 
 

Комментарии:

1. Спасибо вам, ребята, за вашу помощь, отлично. 🙂

Ответ №2:

Обновленная скрипка

  1. Используется $(document).click() для привязки или захвата события щелчка — в любом другом месте сайта.
  2. Использовать event.stopPropagation() в исходном a событии щелчка. Это остановит всплывающее окно событий.
  3. И не используйте .toggle() в $(document).click() функции, поскольку это также show() было бы элементом.

Проверьте этот фрагмент.

 $(document).ready(function () {
    $('a.show_hide').click(function (event) {
        event.stopPropagation();
        $('.hidden-menu').toggle();
        $(this).toggleClass('close');
    });
    $(document).click(function (e) {
        $('.hidden-menu').hide();
        $('a.show_hide').removeClass('close');
    });
});
 

Вместо $(document) этого вы также можете использовать : $('*:not(a.show_hide)') : Demo

Комментарии:

1. этот код скрывает меню, даже если вы нажмете на него, так что это не то, чего хочет OP!

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