Question

I have some menu with structure like this:

<ul id="menu">
    <li><a href="#"><span>First level link 1</span></a>
        <ul>
            <li><a href="#"><span>Child link 1</span></a></li>
            <li><a href="#"><span>Child link 2</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span>First level link 2</span></a>
        <ul>
            <li><a href="#"><span>Child link 2</span></a></li>
            <li><a href="#"><span>Child link 2</span></a></li>
        </ul>
    </li>
</ul>

It need to show only first level ul li, its ok, but then it needs to show by on click second level links. And i cant usw id or rel attr in ul or li – this is my problem to catch child .

My code is like:

var menuRaw = $("ul#menu > li:lt(5)");

    menuRaw.click(function(e){
        e.preventDefault();

        var menuItem = $(this);

        menuRaw.removeClass("selected");
        menuItem.addClass("selected");

        $('#menu ul').hide();
        menuItem.find("ul").show();
    }

And it works but e.preventDefault() is blocking all links in menu (but on second level links needs to be working links as normally they do)

Sorry for my English, and this is first question on stackoverflow.

Answer 1

You can achieve this by checking if the clicked li has any ul‘s nested within it.

$('#menu li').click(function(e) {

  $this = $(this);
  e.stopPropagation(); 

  if ($this.has('ul').length) {
    e.preventDefault();
    $('ul', this).fadeToggle();
  } 

});

Here’s a demo