Question

我需要一个可以显示垂直形成年份的时间线脚本。

我遇到一个很好的但是我无法隐藏每年默认的实际事件，或者保持当前或去年的事件开放。

我在fiddle

上有设置示例

实际示例在https://github.com/technotarek/timeliner。

我想用脚本

进行操作

只显示时间轴年份，并且只需点击一年即可显示当年的事件。
我想将动画从顶部更改为幻灯片，因为它看起来不错。

我还会进一步尝试，看看我是否可以为此做点什么，对此方面的任何帮助都非常感谢。

HTML

<div class="container">
    <div class="timelineContainer" id="timelineContainer">
      <div class="timelineToggle">
        <p><a class="expandAll">+ expand all</a></p>
      </div><br class="clear">

      <div class="timelineMajor">
        <h2 class="timelineMajorMarker"><span>1954</span></h2>

        <dl class="timelineMinor">
          <dt id="19540517"><a>Brown v. Board of Education</a></dt>

          <dd class="timelineEvent" id="19540517EX" style="display:none;">
            <h3>May 17, 1954</h3>

            <p>The U.S. Supreme Court hands down a unanimous 9-0 decision in
            the Brown v. Board of Education of Topeka case, opening the door
            for the civil rights movement and ultimately racial integration in
            all aspects of U.S. society. In overturning Plessy v. Ferguson
            (1896), the court rules that “separate educational facilities are
            inherently unequal.”<sup>1</sup></p><br class="clear">
          </dd><!-- /.timelineEvent -->
        </dl><!-- /.timelineMinor -->
      </div><!-- /.timelineMajor -->


      <br class="clear">
    </div>
  </div><!-- /.container -->

  <div class="container">
  </div>&gt;<!-- /.container -->

这就是我想要的......

Timeline of years

更新：我设法让它在某种程度上发挥作用，但仍然需要进一步修复，就像它显示所有年度点击的事件一样打开它不应该显示事件的细节，除非我点击事件..当一个点击事件年它应该再次隐藏所有事件我的最新小提琴http://jsfiddle.net/axRSC/6/ 我设法将其拉到目前为止，但仍需要解决上述问题

Answer 1

1 :: 信息的开始状态 ::

修改初始化程序，如下所示：

    $.timeliner({
        startState: 'closed'
    });

2 :: 幻灯片动画 ::

修改 timeliner.js 中的openEvent()和closeEvent功能，如下所示：

    function openEvent(eventHeading,eventBody) {
        $(eventHeading)
            .removeClass('closed')
            .addClass('open')
            .animate({ fontSize: settings.fontOpen }, settings.baseSpeed);
        $(eventBody).slideDown(settings.speed*settings.baseSpeed); // <-- slideDown
    }

    function closeEvent(eventHeading,eventBody) {
        $(eventHeading)
            .animate({ fontSize: settings.fontClosed }, 0)
            .removeClass('open')
            .addClass('closed');
        $(eventBody).slideUp(settings.speed*settings.baseSpeed); // <-- slideUp
    }

::更新3 ::

<强> FIDDLE

垂直时间轴保持事件标题隐藏，直到用户单击年份按钮

1 个答案: