How to fadeIn and fadeOut any element on clicking document's body and a specified element both?

Hello Guys!

I have been trying to create a fadeIn and fadeOut menu, but it does not seem to be working at all! See the problem is when I click on the my trigger element (div) which classed example it should be fading in the element (div) classed element_obj but if the user's click on the body element when the element_obj (div) is faded in. But when I click on my trigger element for an instance my element_obj (div) fades in and in another moment it is fade out! I know that this is the problem because I have put my body element also as a fading out trigger! But i开发者_Go百科f I don't do that my whole effect is dead! Here is the jQuery code that I created ~~~~~~~~~

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

    });
});

Can anyone help me out with this.

PROBLEM DEMO

Thanks in Advance!

---

As you can see in this demo my above problem is solved but a new problem have arise! Now I want the drop-down menu to be appear on click on it. I mean if the user clicks on the drop-down menu it does not fades out as it is now. Please see the below demo to see this new problem~~~~~~~~~~~

PROBLEM 2 DEMO

Hope you guys can help me out with this one too.

Thanks in Advance!

---

---

It is because the click event on div#example is bubbled up to the body element and
hence the target element fades in by the div#example and subsequently the body click handler is also executed.
You need to stop the event propagation of the div#example to retain the fadeIn

Change the div#example click handler to as below:

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

---

This might work. It's ugly...

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

---

Your event is bubbling up through both event listeners. When you click on $('div#example'), you are also clicking on the document, so both are firing. You need to prevent the event propagation. Change the first event handler to:

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

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

});