jQuery 带有动画时间轴的手风琴

Question

我正在制作带有动画时间轴的 jQuery 手风琴。快完成了，但我坚持使用最后一个元素上的线条/动画。您可以在 https://tjobtjob.nl/goldstine-sales-en-acquisitie-medewerker/ 上查看工作示例。请向下滚动到名为 'Sollicitatieprocedure' 的部分，几乎在底部。

它适用于所有步骤，除了最后一步。最后一步也显示了一条线，但我希望这条线消失，让最后一个元素只有一个彩色点。

这是我的 jQuery 代码：

jQuery.fn.simpleAccordion = function (options){
    options = $.extend ({start: 0, activeClass: 'active'}, options || {});

    return this.each (
        function(){
            var $this = $(this);
            var headers = $this.children('dt');

            headers.next().hide();
            headers.eq(options.start).addClass(options.activeClass).next().show();

            headers.bind ('click',
                function(){
                    var $this = $(this);

                    $this.addClass(options.activeClass)
                    .next().slideDown();

                    $this.siblings('.' + options.activeClass)
                    .removeClass(options.activeClass) 
                    .next().slideUp();
                }
            );
        }
    );
}
$('dl.stappen').simpleAccordion();

这是 (s)CSS 部分：

dl.stappen{
    width: calc(100% - 45px);
    display: inline-block;
    margin: 50px 0 0;
    padding-left: 45px;
    position: relative;

    dt{
        font-weight: 500;
        font-size: 21px;
        margin-top: 15px;
        margin-bottom: 5px;
        cursor: pointer;
        position: relative;

        &:first-of-type{
            margin-top: 0;
        }
        .round{
            position: absolute;
            left: -45px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: #eee;
            border: 3px solid #dcae23;
            border-radius: 10px;
            z-index: 100;
        }
    }
    dd{
        font-size: 17px;
        line-height: 26px;
        position: relative;

        p{
            margin-bottom: 15px;

            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    &:before{
        background: #dcae23;
        height: calc(100% - 24px);
        width: 3px;
        position: absolute;
        content: "";
        left: 8px;
        top: 8px;
    }
}

感谢您的帮助！

更新：放在笔里：https://codepen.io/bureaukamp/pen/ZEGoaQa

Answer 1

这个例子应该会让你开始。尝试 css 中的缓动，如果愿意，也可以将它们添加到 slideUp() 和 slideDown() 中。

只需在点击时添加和删除 class...

if ($this.text().trim() == "Step three") {
   $(".stappen").addClass("reduce");
} else {
   $(".stappen").removeClass("reduce");
}

并使用以下 CSS

dl.stappen:before {
  ....
  transition: height linear 400ms;
}
dl.stappen.reduce::before {
  height: calc(64% - 45px);
}

您必须相应地更改 JS 中的文本和 calc 中的身高。

jQuery.fn.simpleAccordion = function(options) {
  options = $.extend({ start: 0, activeClass: "active" }, options || {});

  return this.each(function() {
    var $this = $(this);
    var headers = $this.children("dt");

    headers.next().hide();
    headers
      .eq(options.start)
      .addClass(options.activeClass)
      .next()
      .show();

    headers.bind("click", function() {
      var $this = $(this);
      if ($this.text().trim() == "Step three") {
        $(".stappen").addClass("reduce");
      } else {
        $(".stappen").removeClass("reduce");
      }
      $this
        .addClass(options.activeClass)
        .next()
        .slideDown();

      $this
        .siblings("." + options.activeClass)
        .removeClass(options.activeClass)
        .next()
        .slideUp();
    });
  });
};
$("dl.stappen").simpleAccordion();

dl.stappen {
  width: calc(100% - 45px);
  display: inline-block;
  margin: 50px 0 0;
  padding-left: 45px;
  position: relative;
}
dl.stappen dt {
  font-weight: 500;
  font-size: 21px;
  margin-top: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}
dl.stappen dt:first-of-type {
  margin-top: 0;
}
dl.stappen dt .round {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #eee;
  border: 3px solid black;
  border-radius: 10px;
  z-index: 100;
}
dl.stappen dd {
  font-size: 17px;
  line-height: 26px;
  position: relative;
}
dl.stappen dd p {
  margin-bottom: 15px;
}
dl.stappen dd p:last-child {
  margin-bottom: 0;
}
dl.stappen:before {
  background: black;
  height: calc(100% - 24px);
  width: 3px;
  position: absolute;
  content: "";
  left: 8px;
  top: 8px;
  transition: height linear 400ms;
}
dl.stappen.reduce::before {
  height: calc(64% - 45px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="stappen">
  <dt>
    <div class="round"></div>
    Step one
  </dt>

  <dd>
    Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description.
  </dd>

  <dt>
    <div class="round"></div>
    Step two
  </dt>

  <dd>
    Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description.
  </dd>

  <dt>
    <div class="round"></div>
    Step three
  </dt>

  <dd>
    Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description.
  </dd>
</dl>

Answer 2

为了更好更简单地完成，HTML 结构需要稍微更新一下。在这里，我将每个手风琴项目包装在 .item div.

中

在下文中，我更新了 html、css 和 js 以使其适用于内容的任何动态变化。

jQuery.fn.simpleAccordion = function(options) {
  options = $.extend({
    start: 0,
    activeClass: "active",
    itemClass: "item"
  }, options || {});

  function updateView(activeItem) {
    var otherItems = activeItem.siblings();
    otherItems
      .removeClass(options.activeClass)
      .children('dd').slideUp();

    activeItem
      .addClass(options.activeClass)
      .children('dd').slideDown();

  }

  return this.each(function() {
    var $this = $(this);

    var itemSelector = "." + options.itemClass;
    var items = $(itemSelector, $this);
    updateView(items.eq(options.start));

    $this.on('click', itemSelector + '>dt', function() {
      var activeItem = $(this).closest(itemSelector);
      if (activeItem.hasClass(options.activeClass)) return;
      updateView(activeItem);
    });

  });
};

$("dl.stappen").simpleAccordion();

dl.stappen {
  display: block;
  margin: 50px 0 0;
}

dl.stappen .item {
  padding-left: 45px;
  position: relative;
}

dl.stappen .item:before {
  background: black;
  width: 3px;
  bottom: -10px;
  position: absolute;
  content: "";
  left: 8px;
  top: 8px;
}

dl.stappen .item:last-of-type:before {
  display: none;
}

dl.stappen .item dt {
  font-weight: 500;
  font-size: 21px;
  margin-top: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}

dl.stappen .item dt:first-of-type {
  margin-top: 0;
}

dl.stappen .item dt .round {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #eee;
  border: 3px solid black;
  border-radius: 10px;
  z-index: 100;
}

dl.stappen .item dd {
  font-size: 17px;
  line-height: 26px;
  position: relative;
  margin-left: 40px;
}

dl.stappen .item dd p {
  margin-bottom: 15px;
}

dl.stappen .item dd p:last-child {
  margin-bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="stappen">
  <div class="item">
    <dt>
      <div class="round"></div>
      Step one
    </dt>
    <dd>
      Step one description. Step one description. Step one description. Step one description. Step one description. Step one description.
    </dd>
  </div>
  <div class="item">
    <dt>
      <div class="round"></div>
      Step two
    </dt>
    <dd>
      Step two description. Step two description. Step two description. Step two description. Step two description.
    </dd>
  </div>
  <div class="item">
    <dt>
      <div class="round"></div>
      Step three
    </dt>
    <dd>
      Step three description. Step three description. Step three description. Step three description. Step three description. Step three description.description.
    </dd>
  </div>
</dl>

jQuery 带有动画时间轴的手风琴

jQuery accordion with animated timeline

jquery

timeline

sass

accordion