带有动画时间线的 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

要以一种更好且更简单的方式进行操作，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>

Answer 2

这个例子应该可以帮助你。如果您愿意，可以在 css 中使用缓动并将它们添加到 slideUp() 和 slideDown()。

这可以通过在点击时添加和删除一个类来完成......

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>