on click toggle ul - on click elsewhere hide ul

Question

hey all - my second day of attempting jquery on a task at work, and am a bit stuck.

i've got an unordered list of links.. inside an unordered list of links

on clicking an <li class="headlink">, I would like the <li class="headlink"> 's child <ul> to become visible.

on clicking away (anywhere on the document), I would like the child <ul> to dissapear.

By default the child <ul> is set to hidden in the stylesheet.

html

<ul id="cssdropdown">
    <li><a href="#">A</a></li>
    <li class="headlink">
        <a href="#">B</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </ul>
    </li>
    <li><a href="#">C</a></li>
</ul>

jquery

<script type="text/javascript">

    $(document).ready(function(){
        $('#cssdropdown li.headlink').click(
            function() { $('ul', this).toggle("slow"); });
    });


    $(document).ready(function(){
        $('body').click(function() { 
            $('li ul:visible').hide("slow") } ) } );

</script>

Problem - when I click on a <li class="headlink">, I get the yoyo effect, where the child UL is displayed - and then hides itself.

any advise much appreciated.

Answer 1

You should prevent the event to propagate back to the body:

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(function(event) {
      $('ul', this).toggle("slow");
      event.stopPropagation();
    });
});

And to hide current open items:

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(function(event) {
      $(this).siblings(".headlink").hide("slow");
      $('ul', this).toggle("slow");
      event.stopPropagation();
    });
});

Answer 2

This will fix the issue for the "yo-yo" effect: (cancel propagation)

$(document).ready(function(){
    $('#cssdropdown li.headlink').click(
        function(event) { 
          $('ul', this).toggle("slow"); 
          event.stopPropagation()
      });
});

Answer 3

Hi, ive tested this little script, but it doesn't work the way i want to.

It might be the same question as above, but anyways...:

on load the my menu shows all lists and the nested ones within. When i click the li's in the first ul, then nested ones hide. How can i make the menu hide the nested ul's on load. also when i just click the mouse some random place, the nested links hide..

also when i click on a link from the nested ul, it hides. How can i make stay open/nested while active?

I'm very new to javascript and jquery