Question

我有一些嵌套的ul标签，我将它们隐藏起来，以便我可以对它们应用jQuery slideToggle效果（我想独立地滑动每个元素）。但是当我在第一个'ul'中按下每个'li'标签时，所有第二个'ul'都会一起显示出来。

这是我的html代码：

<div class="content">
    <ul class="mainList">
          <li class="mainItem">List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul> 
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
          <li class="mainItem">>List item</li>
                     <ul class="subList">
                         <li class="subItem">List item</li> 
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                         <li class="subItem">List item</li>
                     </ul>
    </ul>

</div>

js文件看起来像这样：

$('.content').click(function(){
   $('.mainList').slideToggle();
});
$('.mainItem').click(function(){
   $('.subList').slideToggle();
});

Answer 1

我创造了一个小提琴：http://jsfiddle.net/Wrs4c/

更正了标记和脚本错误并创建了正确的jquery。

$('.mainItem').next().children().slideToggle();

$('.mainItem').click(function(){
    $(this).next().children().slideToggle();
});

Answer 2

我不确定你要做什么但是这是一个可以帮助你的小提琴：jsfiddle

一些注意事项：

在你的jquery中：你有一个错误功能 - ＆gt;功能

如果您只想影响一个元素，则应使用唯一ID或使用

$(this)...

此表示仅使用触发事件的元素（在您的示例中为“点击”）
现在你可以使用 next（）， prev（）， children（）， parent（），< em> find（）等 - 选择另一个相对元素。

如何设置slideToggle多次工作

2 个答案: