下拉列表选择器JQUERY

Question

I'm trying to create a jQuery drop-down script that will be efficient and minimal. I need a way to associate a couple of uls with a li and reference this in an each loop. Think of each of the clickable li titles as a cluster and the 'child' ul's under them are part of this too.

I want to write a piece of efficient code, using an each loop to iterate through each of the clickable lis and expand the sublist uls associated with it. The problem is I need to know how to associate these sublist uls with the parent li in a way that can be referenced in an each loop. No standard jquery selectors can really help me because the sublist uls are not REALLY children of the li.

HTML and Jquery attempt below. Please Help

<ul>
        <li class='tier1'>This is what I want to click</li>
            <ul (#1)>
                <li>I want this to drop down</li>

            </ul>
                             <ul>
                <li  id="gap">I want these to drop down</li>

            </ul>
       <li class='tier1'>Another clickable title</li>
            <ul>
                <li  id="gap">I dont want this to drop down when I click the li at the top of this markup</li>

            </ul>
</ul>

My problem is that the ul (#1) that i want to slideToggle when I click the the li above it, is not quite a child.

So I made the following code:

$(document).ready(function(){
    $('.tier1').each(function(){
        $(this).click(function(){
            $(this).children('ul').slideToggle('slow');
        });
    });
});

Answer 1

Your main problem may be that in your provided HTML there is nothing with the "tier1" class. You also don't need an .each() function, as you can just attach the click function to the class:

$('.tier1').click(function(){
    $(this).children('ul').slideToggle('slow');
});

Your HTML was also invalid, you can't have UL's nested in UL's. Fixed version:

<ul>
    <li class="tier1">This is what I want to click
        <ul>
            <li>I want this to drop down</li>
        </ul>
        <ul>
            <li  id="gap">I want these to drop down</li>
        </ul>
    </li>
    <li class="tier1">Another clickable title
        <ul>
            <li id="gap">I dont want this to drop down when I click the li at the top of this markup</li>
        </ul>
    </li>
</ul>

You'll also want some CSS to hide the children before the click:

ul li ul{
    display: none;
}

Working demo in this fiddle .

Answer 2

See my example here: http://jsfiddle.net/D29mQ/2/

You have some errors in your markup. A ul cannot be a direct descendent of a ul , but can be a direct descendent of a li . I have added a hide() on the ul 's within the li.drawer, so that the content is not hidden if javascript is disabled (I would not recommend hiding these with css).

<ul>
<li>
    <p class='handle'>This is what I want to click</p>
    <ul  class='drawer'>
        <li>
            <p class='handle'>This has a drawer too!</p>
            <ul  class='drawer'>
            <li>I want this to drop down</li>
            </ul>
        </li>
    </ul>
    <ul  class='drawer'>
        <li>I want these to drop down</li>
    </ul>
</li>

<li>
    <p class='handle'>This is what I want to click</p>
    <ul  class='drawer'>
        <li>I want this to drop down</li>
    </ul>
    <ul  class='drawer'>
        <li>I want these to drop down</li>
    </ul>
</li>
</ul>

<div>
    <p class='handle'>Here is an example using a wrapper div and paragraph tags.</p>
    <p  class='drawer'>
        I want this to drop down
    </p>
    <p  class='drawer'>
        I want these to drop down
    </p>
</div>  

and the jquery

$(document).ready(function(){
  $('.drawer').hide();
  $('.handle').click(function(){
        $(this).parent().children().not(this).slideToggle('slow');        
  });
});