Как fadeIn и fadeOut любой элемент при щелчке по телу документа и указанный элемент оба?

Question

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

Я пытался создать меню fadeIn и fadeOut, но, похоже, оно не работает вообще!Проблема заключается в том, что, когда я нажимаю на свой элемент триггера (div), который классифицируется как example, он должен исчезать в элементе (div), классифицируемом element_obj, но если пользователь нажимает на элемент body, когда element_obj (div) исчезает. Но когда я нажимаю на элемент триггера для экземпляра, мой element_obj (div) исчезает, и в другой момент он исчезает!Я знаю, что это проблема, потому что я поместил свой элемент тела в качестве триггера затухания!Но если я этого не сделаю, весь мой эффект будет мертв !Вот код 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 ДЕМО

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

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

---

Answer 1

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

Измените пример обработчика кликов в div #, как показано ниже:

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

Answer 2

Ваше событие бурлит через обоих слушателей событий. Когда вы нажимаете $('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();       
  }    

});

Answer 3

Это может сработать.Это безобразно ...

$(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();
        }
      }
    });
});