Nested list jQuery

[nacedo]

I have this chunk of jQuery that is doing strange behavior. When I load the page, my list is slided Up (completely folded) wich make sense. But I have to double click each parent to slide them down, which is not the normal behavior.

I think this line is the problem : $('#tree ul:parent').slideUp(); when I remove it, the sliding is working with a single click but the list does not come slided Up(completely forded) at the page load.

More strange, when a parent is double clicked, I can fold/unfold it with a single click after.

<script type="text/javascript" src="http://google.com/jsapi"></script>
<script type="text/javascript">
        google.load("jquery", "1");
        google.setOnLoadCallback(function() {
            $(function() {
                 $('#tree ul:parent').slideUp();
                $("#tree li:parent").bind("collapse", function(evt) { 
                    if(evt.target == evt.currentTarget) 
                    {
                        $(evt.target).children().slideUp().end();
                    }
                }).bind("expand", function(evt) {
                    if(evt.target == evt.currentTarget) 
                    {
                        $(evt.target).children().slideDown().end();
                    }
                }).toggle(function() {
                    $(this).trigger("collapse");
                }, function() {
                    $(this).trigger("expand");
                });
            });
        });

    </script>

Here is the HTML code associated with that.

 <ul id="tree">
    <li>Sports
      <ul>
        <li>Football
          <ul>
            <li>logo</li>
            <li>background</li>
        </ul>
        </li>
        <li>Hockey
          <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
                <li>Volley-Ball
                  <ul>
                    <li>jquery</li>
            <li>myscript</li>
        </ul>
        </li>
        <li>Badminton
          <ul>
            <li>page</li>
            <li>typography</li>
        </ul>
        </li>
    </ul>
    </li>
        <li>Travels
          <ul>
        <li>Africa
          <ul>
            <li>logo</li>
            <li>background</li>
          </ul>
        </li>
        <li>US
          <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
                <li>Asia
                  <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
        <li>Europe
          <ul>
            <li>page</li>
            <li>typography</li>
          </ul>
        </li>
      </ul>
    </li>
        <li>Romans
          <ul>
            <li>Action
              <ul>
            <li>logo</li>
            <li>background</li>
          </ul>
        </li>
        <li>Love
          <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
                <li>Adventure
                  <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
        <li>Test
          <ul>
            <li>page</li>
            <li>typography</li>
          </ul>
        </li>
    </ul>
    </li>
        <li>Tst
          <ul>
            <li>Jouets
              <ul>
                <li>logo</li>
            <li>background</li>
        </ul>
        </li>
        <li>Activities
          <ul>
            <li>jquery</li>
            <li>myscript</li>
        </ul>
        </li>
                <li>jsccc
          <ul>
            <li>jquery</li>
            <li>myscript</li>
          </ul>
        </li>
        <li>cssss
          <ul>
            <li>page</li>
            <li>typography</li>
          </ul>
        </li>
    </ul>
    </li>
  </ul>

[pixelsoul]

Did you right the jQuery? It seems really more complex than it really needs to be. Also, .bind() is deprecated in version 1.7 and higher and was replaced with .on(). Also, what is this "collapse" and "expand" events your binding to? Are you using a plugin of some type?

Here is a function I wrote for collapsing a multi-level nested UL. Maybe it might help you?

$(function () {
    $("#collapse li").children('ul').hide();
    $("#collapse li").on('click', function(event){
        $(this).children('ul').slideToggle(300).end();
        event.stopPropagation();
    });
});

An example http://jsfiddle.net/pixelsoul/7H4t7/

It works with the exact same markup like you have for your UL. Of course you would need to change the id from #collapse to what ever you want to use. You also have to use jQuery 1.7 or higher.

[nacedo]

Brilliant ! It is a quite "old" website I am working on, I dont mind do some refactoring and take your code :)