Question

I have the following list structure (which is a menu by the way):

<div id="mainmenu"> 
    <ul class="menu">
        <li class="item-435">
        <li class="item-468 active deeper parent">
            <a href="#">News</a>
            <ul>
                <li class="item-469 current active">
                    <a href="/index.php/news/news-topaktuell">Topaktuell</a>
                </li>
                <li class="item-480">
                    <a href="/index.php/news/events">Events</a>
                </li>
            </ul>
        </li>
        <li class="item-476">
        <li class="item-477">
        <li class="item-478">
        <li class="item-479">
    </ul>
</div>

I want to attach a click() event listener on the first <li>, so that it shows the header of the page. The other <li> tags should also have a click() listener, but in case of this event, the header should be hidden; the header is shown by default, so the header should only show on the home page (first-child).

What I already did:

$('#mainmenu .menu li:not(:first-child)').click(function() {
     //hide header
});

$('#mainmenu .menu li:first-child').click(function() {
     //show header
});

But this selects the first child from the sublist too, which I do not want. Is there any elegant way to select the desired tags only?

Answer 1

Try

$('#mainmenu .menu > li:not(:first-child)').click(function() {
     //hide header
});

$('#mainmenu .menu > li:first-child').click(function() {
     //show header
});