SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Non nested and parents hide when clicked

    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.
    Code HTML4Strict:
    <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>
    All those who wander aren't lost.

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're HTML has some misplaced tags, it should look like:

    Code HTML4Strict:
    <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:

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

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    its not working
    All those who wander aren't lost.

  4. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nofel View Post
    its not working
    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. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When i click nothing happens.that what i mean the sript isn't working
    All those who wander aren't lost.

  6. #6
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •