1

我有一些嵌套的 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();
});
4

2 回答 2

0

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

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

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

$('.mainItem').click(function(){
    $(this).next().children().slideToggle();
});
于 2013-05-14T12:16:58.147 回答
0

我不确定您要做什么，但这里有一个可能对您有所帮助的小提琴：jsfiddle

一些注意事项：

在您的 jquery 中：您有一个错误 functin -> function。

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

$(this)...

这将指示仅使用触发事件的元素（在您的示例中为“单击”）
，现在您可以使用next()、prev()、children()、parent()、find()等 - 选择另一个亲戚元素 。

于 2013-05-14T12:22:17.743 回答