jquery 1.3.2

I have a nested group of lists similar to below where all but the
top-level list is hidden. Clicking a link should open the next level
(as well as do some AJAX stuff). I'm having some trouble getting the
2nd level to open without also opening the 3rd level when clicking on
a top-level link.

(The IDs are here clarity)

<ul id="first">
  <li class="Section">
    <a href="">...</a>
    <ul id="second">
          <li>
            <a href="">...</a>
          </li>
          <li>
            <a href="">...</a>
            <ul id="third">
                  <li>
                    <a href="">...</a>
                  </li>
                  <li>
                    <a href="">...</a>
                  </li>
          </li>
        </ul>
  </li>
  <li class="Section">
    ...
  </li>
</ul>

My code closes the lists on load like so:

$('#nav li.Section ul').hide();

This line, in the click handler, opens the next nav if there is one
inside the clicked anchor's list item:

$(this).next('ul').toggle('slow');

However, it's also opening the 3rd level when clicking an anchor at
the top level. From my reading of the API, next('ul') should only be
returning the 2nd level UL. Am I misunderstanding? Is there a better
way to grab only the *very next* ul?

Reply via email to