JQuery Nested ul with parent li, show hide

Question

I'm trying to create a simple accordion menu where ul nested in li is hidden until the parent li is clicked, which first hides all other nested ul if they are open, and then lays out the nested ul of that li.

The only other trick is that I want to remove the href for the parent li.

I have achieved most of this, except that my nested ul li inherits the above actions, even if I am targeting the parent class li. I know that I am missing something fundamental. thanks in advance

HTML

<ul>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li.expanded><a href="foo">Lorum</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
</ul>

JQuery

$(document).ready(function() {
    $('ul ul').hide();
    $('ul li.expanded a').removeAttr("href");
    $('ul li').click(function(){
      $('ul ul').hide('slow');
      $(this).find('ul').toggle('slow');



    });
 });
;

Answer 1

html , li.leaf class= "leaf". script. css. : http://jsfiddle.net/theuideveloper/DFHWd/4/ , . ! -theUiDeveloper

HTML

<ul id="master">
  <li class="expanded"><a href="foo">Lorum1</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum2</a>
    <ul>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
      <li.leaf><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum3</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
  <li class="expanded"><a href="foo">Lorum4</a>
    <ul>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
      <li class="leaf"><a href="foo">Lorum</a></li>
    </ul>
  </li>
</ul>

CSS

ul#master ul{
display:none;
}

JQuery

 $(document).ready(function() {
            $('ul li.expanded a').each(function(i){
            var subUl = $(this).parent().find('ul'); //Get the sub ul.
            $(this).bind('click',function(e){
                    e.preventDefault(); // Prevent the default action of the link
                    $('.expanded ul').hide(); // hide all the other ULs
                    subUl.toggle();
                }) ;   
            });
        });     

Answer 2

jQuery :

$(document).ready(function() {
    $('ul ul').hide();
    $('ul li.expanded a').removeAttr("href");
    $('ul li.expanded > a').click(function(event) {
        $('ul ul').hide('slow');
        $(this).parent().find('ul').toggle('slow');
    });
});

, li click , li.expanded click, , a li expanded.

: http://jsfiddle.net/andrewwhitaker/ybVFj/

, HTML :

<ul>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
    <li class="expanded"><a href="foo">Lorum</a>
        <ul>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
            <li class="leaf"><a href="foo">Lorum</a></li>
        </ul>
    </li>
</ul>