javascript - 在点击事件中隐藏和显示点击元素

Question

我需要根据年份在时间轴中隐藏和显示元素。

假设在 2015 年使用点击，那么它应该隐藏它的所有子元素并在用户再次点击同一年 2015 时显示它。

我根据我的设计修改了以下 HTML 和 CSS，原始脚本可以在这里找到 http://codyhouse.co/gem/vertical-timeline/

我已经设置了 fiddle http://jsfiddle.net/6nvumkxc/2/

当我点击年份时，它只隐藏第一个元素，而不是该特定年份 block 中的所有 cd-timeline-block。

Answer 1

那是因为你在当前上下文中使用了 .next()。它只会针对下一个第一个 sibling ，而不是所有 sibling 。您需要将点击处理程序修改为:

$('.cd-year').click(function(){
  $(this).parent().find('.cd-timeline-block').slideToggle();
});

或

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
});

或

$('.cd-year').click(function(){
    $(this).siblings().slideToggle();
});

Working Demo

更新:只保留第一年选项:

$('.cd-year').click(function(){
   $(this).nextAll().slideToggle();
}).not(':first').click();

Demo with first option open