Question

I have a ul

    <div id="menu">
  <ul>
    <li><a href="http://apple.com">first</a></li>
    <li><a href="http://apple.com">second</a></li>
    <li><a href="http://www.apple.com/iphone/">third</a>
      <ul>
        <li><a href="http://apple.com">third1</a></li>
        <li><a href="http://apple.com">third2</a></li>
        <li><a href="http://apple.com">third3</a></li>
        <li><a href="http://apple.com">third4</a></li>
      </ul>
    </li><!--fi altres -->
    <li><a href="http://apple.com">forth</a></li>
    <li><a href="http://www.apple.com/iphone/">fith</a>
       <ul>
        <li><a href="http://apple.com">fith1</a></li>
        <li><a href="http://apple.com">fith2</a></li>
        <li><a href="http://apple.com">fifh3</a></li>
      </ul>
    </li><!--fi nosaltres -->
  </ul>
</div><!--menu -->

I have a jQuery that works fine in hover:

$(function(){
    $('#menu ul li').hover(function(){
            $(this).find('ul').fadeIn()
        },function() {
            $(this).find('ul').fadeOut()
        }
    )
})

The same doesn’t work with click:

$(function(){
    $("#menu ul li").click(function(event) {
        event.preventDefault();
        $(this).find('ul').fadeIn()
    });
})

When I click to fadeIn one submenu I have to fadeIn before the others submenus. How?

Answer 1

my guess is that you want something like this.

$("#menu ul li").hover(function(event) {
        $(this).find("ul").fadeIn("slow");
    },
    function(event) {
        $(this).find("ul").fadeOut("slow");
});

EDIT I think I got it:

$(document).ready(function () {
    $("#menu > ul > li").click(function(event) {
        var $this = $(this);
        if ( $this.find("ul").length && event.target.href/*.split('/').pop()*/ == $('> a', this).attr('href') ) {
            event.preventDefault();
            $this.siblings().find("ul").fadeOut("slow");
            $this.find("ul").fadeIn("slow");
        }
    });
});

“&& event.target.href.split('/').pop() == $('> a', this).attr('href')” is to avoid disabling default functionnality (open the link) in the submenu.

NOTA BENE if the sublink is exactly the same as the memu link, the sublink wont’ work. You can replace “http:://aaa.com/” by “http://www.aaa.com/” in the menu OR submenu (but not both)