Non nested and parents hide when clicked

JavaScript
1

Hi folks, i m trying to make a simple nested menu. my problem is when i click on child li’s the parent as well as whole menu toggle to hide. i added a class too but its not helping.


<script>
        $("ul.xoxo>li").slideToggle("slow")
</script>

<body>
<ul class="topnav">
    <li>Home</li>
    <li>About
        <ul class="xoxo">
            <li>Folio</li>
            <li>Fotography</li>
    </li>
        </ul>
     <li>Contact me</li>
</ul>
</body>
2

You’re HTML has some misplaced tags, it should look like:


<body>
<ul class="topnav">
    <li>Home</li>
    <li>About
        <ul class="xoxo">
            <li>Folio</li>
            <li>Fotography</li>
        </ul> <!-- your end ul was in the wrong spot -->
    </li>
     <li>Contact me</li>
</ul>
</body>

If the intention in your javascript is to click an LI and show/hide the sub menu you would use something like the following:


$("ul.topnav>li").click(function(){
    $('ul',this).slideToggle("slow");
});
3

its not working :eek:

4

Define “not working”

Here is this code. When you click on the parent list item the sub list shows/hides. Perhaps I misunderstood what you are trying to achieve?
jsFiddle

5

When i click nothing happens.that what i mean the sript isn’t working

6

Works for me in Firefox (latest), IE 7+, Opera 9+, Chrome (latest), Safari 4+

Like I implied, it would be helpful with a more detailed description of what you are trying to achieve. The grammar you used in your posts makes it difficult to understand.