0

我正在尝试创建一个高效且最小化的 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');
        });
    });
});
4

2 回答 2

1

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

$('.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;
}

在这个小提琴中工作演示。

于 2013-01-28T19:50:22.410 回答
0

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

您的标记中有一些错误。Aul不能是 a 的直接后代ul，但可以是 a 的直接后代li。我在 li.drawerhide()中的ul's 上添加了一个，以便在禁用 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');        
  });
});
于 2013-01-28T19:50:33.323 回答