Блог

Главная - Вопросы по программированию - Как отключить любой элемент при нажатии на тело документа и указанный элемент одновременно?

Как отключить любой элемент при нажатии на тело документа и указанный элемент одновременно?

#jquery #html #jquery-ui #jquery-plugins #jquery-selectors

#jquery #HTML #jquery-пользовательский интерфейс #jquery-плагины #jquery-селекторы

Вопрос:

Привет, ребята!

Я пытался создать меню fadeIn и fadeOut, но, похоже, оно вообще не работает! Видите ли, проблема в том, что когда я нажимаю на мой элемент триггера ( div ), который классифицирован example , он должен затухать в элементе ( div ), классифицированном element_obj , но если пользователь нажимает на элемент body, когда element_obj ( div ) затухает. Но когда я нажимаю на свой триггерный элемент для экземпляра, мой element_obj ( div ) исчезает, а в следующий момент он исчезает! Я знаю, что это проблема, потому что я поместил свой элемент body также в качестве триггера затухания! Но если я этого не сделаю, весь мой эффект мертв! Вот созданный мной код jQuery ~~~~~~~~~

 $(document).ready(function () {
  $('div#example').click(function () {

      if($('div#example_obj').is(':visible')){
            $('div#example_obj').fadeOut();
      }else{
            $('div#example_obj').fadeIn();
      }

  });
    $(document).click(function () {

      if($('div#example_obj').is(':visible')){
            $('div#example_obj').fadeOut();
      }

    });
});

Кто-нибудь может мне помочь с этим.

ДЕМОНСТРАЦИЯ ПРОБЛЕМЫ

Заранее спасибо!

Как вы можете видеть в этой демонстрации, моя вышеупомянутая проблема решена, но возникла новая проблема! Теперь я хочу, чтобы выпадающее меню появлялось при нажатии на него. Я имею в виду, что если пользователь нажимает на выпадающее меню, оно не исчезает, как сейчас. Пожалуйста, посмотрите демонстрацию ниже, чтобы увидеть эту новую проблему~~~~~~~~~~~

ДЕМОНСТРАЦИОННАЯ ПРОБЛЕМА 2

Надеюсь, вы, ребята, сможете помочь мне и с этим.

Заранее спасибо!

Ответ №1:

Это происходит потому, что событие click в div #example передается элементу body, и
следовательно, целевой элемент затухает в div # example, а затем также выполняется обработчик щелчка по телу.
Вам нужно остановить распространение события div#example, чтобы сохранить исчезновение

Измените обработчик щелчка div #example на приведенный ниже:

 $('div#example').click(function (e) {        
    if($('div#example_obj').is(':visible')){             
        $('div#example_obj').fadeOut();       
    }else{             
        $('div#example_obj').fadeIn();       
    }    
  e.stopPropagation();
});

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

1. 1 для читаемого кода. Это то .stopPropagation() , для чего это нужно!

2. Спасибо за предыдущий ответ на этот вопрос, но теперь мне нужна еще одна ваша помощь с этой новой проблемой, пожалуйста, ознакомьтесь с ней и помогите мне. Заранее спасибо!

3. Хорошо, я получил ответ. Еще раз спасибо за вашу помощь.

4. Не уверен, что я понял ваш вопрос. Внесены изменения в сообщение jsfiddle. Проверьте тот, который @ jsfiddle.net/UxQNV/1 и дайте мне знать, это ли вы имели в виду?

Ответ №2:

Это может сработать. Это некрасиво…

 $(document).ready(function () {
    $(document).click(function(e) {
      if (e.targetElement.id == 'example')
      {
        if($('div#example_obj').is(':visible')){
            $('div#example_obj').stop().fadeOut();
        }else{
            $('div#example_obj').stop().fadeIn();
        }
      } else {
        if($('div#example_obj').is(':visible')){
            $('div#example_obj').stop().fadeOut();
        }
      }
    });
});

Ответ №3:

Ваше событие передается через оба прослушивателя событий. Когда вы нажимаете на $('div#example') , вы также нажимаете на document , поэтому срабатывают оба элемента. Вам нужно предотвратить распространение события. Измените первый обработчик событий на:

 $('div#example').click(function (e) {
  e.stopPropagation();

  if($('div#example_obj').is(':visible')){             
    $('div#example_obj').fadeOut();       
  }else{             
    $('div#example_obj').fadeIn();       
  }    

});