Question

I am new to jquery and there is probably another function that i should be using to achieve this so please tell me.

I have a drop down box that is dropped down with a toggle but when the drop down box is clicked it fades out. This cannot happen as there are links inside the drop down.

Here is a jsfiddle so please have a look and see what i’m doing wrong.

HTML:

<span id="profile">
        <span id="profileDrop">
          <div id="triangleUp"></div>
          <div id="profileDown">
           <a href="../likes.php"><div id="profileElement"><img src="files/images/heart.png" height="12px" border="0"><d> Your Favourites</d></div></a>
           <a href="../tracks.php"><div id="profileElement"><img src="files/images/settings.png" height="12px" border="0"><d> Settings</d></div></a>
           <a href="../phpscripts/logout.php"><div id="profileElement"><img src="files/images/logout.png" height="12px" border="0" /><d> Logout</d></div></a>
          </div>  
        </span>
      </span>​

jQuery:

$('#profile').toggle(function(){

        $('#profileDown', '#profile').fadeIn(300);
        $('#triangleUp', '#profile').fadeIn(300);
    }, function(){

        $('#profileDown', this).fadeOut(300);
        $('#triangleUp', '#profile').fadeOut(300);
});​

Answer 1

Try adding:

$('#profile a').click(function(e) {
    e.stopPropagation();
});​

This will stop the click event from propagating up from your links and triggering the fade.

jsFiddle example