0

我有一个三深的 ul 列表。单击顶部 ul 时，我只希望显示第二个 ul。然后当点击第二个 ul 时，应该显示第三个。现在发生的是当第一个 ul 被点击时，所有 ul 都在下面显示。我怎样才能让它正常工作？

代码：

jQuery(document).ready(function () {
  jQuery('.list-year').addClass('list-year-left');
  jQuery('.list-year').on('click',(function() { 
    jQuery('.list-year').toggleClass('list-year-down');
    jQuery('.list-month').toggle();  
  }));

});

我有一个 js fiddle 链接：http: //jsfiddle.net/7xbjr/4/ 非常感谢任何帮助！

4

3 回答 3

0

的类<li>is list-post，但您已将其定义list-posts为不匹配。

.list-posts {
  display: none;
}

应该成为

.list-post {
  display: none;
}

此外，click 事件应该绑定到<li>元素而不是<ul>. 请注意，如果您在children元素中绑定click事件，建议停止事件传播，否则click事件会传播到parent的click事件。

这是JavaScript

jQuery(document).ready(function () {
    jQuery('.list-year').addClass('list-year-left');
    jQuery('.list-year > li').on('click', function() { 
        jQuery('.list-year').toggleClass('list-year-down');
        jQuery('.list-month').toggle(); 
    });

    jQuery('.list-month > li').on('click',function(e) {
        e.stopPropagation(); // add this for avoiding click event propagate to parent 
        jQuery('.list-post').toggle(); 
    });
});

jsfiddle：http: //jsfiddle.net/BMc43/2/

于 2013-03-03T14:14:27.067 回答
0

您的代码可能会更整洁，但是您可以在这里http://jsfiddle.net/BMc43/3/：

jQuery(document).ready(function () {
    jQuery('.list-year').addClass('list-year-left');
    jQuery('.list-year').on('click',(function() { 
        jQuery('.list-year').toggleClass('list-year-down');
        jQuery('.list-month').toggle(); 
    }));

    jQuery('.list-month').on('click',(function(e) {
        e.stopPropagation();
        jQuery('.list-post').toggle(); 
    }));
});

当然，正如 Derek 所说，您必须更改.list-posts为CSS。.list-post

于 2013-03-03T14:14:35.830 回答
0

以下事情是错误的：

  • 您有一个班级列表帖子，您将其称为列表帖子。
  • 每当您单击子节点时都会触发您的单击事件，再次触发切换并关闭菜单。
  • 您需要为第三级菜单添加一个额外的点击事件

http://jsfiddle.net/7xbjr/5/ 这是一个更新的小提琴，它可以工作

jQuery(document).ready(function () {
 jQuery('.list-year').addClass('list-year-left');
  jQuery('.list-year > li').on('click',function() { 
    jQuery('.list-year').toggleClass('list-year-down');
    jQuery('.list-month').toggle();  
  });
  jQuery('.list-month > li').on('click',function() { 
    jQuery('.list-post').toggle();  
  });
});
于 2013-03-03T14:16:44.733 回答