下拉列表选择器 JQUERY

Question

我正在尝试创建一个高效且最小化的 jQuery 下拉脚本。 我需要一种方法将几个 uls 与一个 li 相关联，并在每个循环中引用它。 将每个可点击的 li 标题视为一个集群，它们下面的“子”ul 也是其中的一部分。

我想编写一段高效的代码，使用 each 循环遍历每个可点击的 lis 并展开与其关联的子列表 uls。 问题是我需要知道如何以可以在每个循环中引用的方式将这些子列表 ul 与父 li 关联起来。没有标准的 jquery 选择器可以真正帮助我，因为子列表 uls 并不是 li 的真正孩子。

下面的 HTML 和 Jquery 尝试。请帮忙

<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>

我的问题是当我单击它上面的 li 时我想要滑动切换的 ul (#1) 不是一个孩子。

于是我做了如下代码：

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

Answer 1

您的主要问题可能是在您提供的 HTML 中，“tier1”类没有任何内容。您也不需要.each() 函数，因为您只需将点击函数附加到类：

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

您的 HTML 也是无效的，您不能将 UL 嵌套在 UL 中。固定版本：

<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>

您还需要一些 CSS 在点击之前隐藏子项：

ul li ul{
    display: none;
}

this fiddle 中的工作演示。

Answer 2

在此处查看我的示例：http://jsfiddle.net/D29mQ/2/

您的标记中有一些错误。 ul 不能是 ul 的直接后代，但可以是 li 的直接后代。我在 li.drawer 中的ul 上添加了一个hide()，这样如果禁用了 javascript，内容就不会隐藏（我不建议使用 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>  

和 jquery

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