隐藏并显示点击事件上的点击项目

Question

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

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

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

我设置了小提琴http://jsfiddle.net/6nvumkxc/2/

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

Answer 1

这是因为您已将.next()与当前上下文一起使用。它只针对下一个兄弟而不是所有兄弟。你需要修改点击处理程序：

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

Answer 2

你需要像这样使用

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

next（）将只获取下一个元素。您应该使用.nextAll()来获取所有元素。

Fiddle