jquery手风琴与动画时间表 我正在用动画时间表制作jQuery手风琴。它几乎完成了，但是我被最后一个元素上的行 /动画所困。您可以在以下方式查看一个工作示例：https：//tjobtjob.nl/

Question

这是我的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;
    }
}

thanks帮助！

update：将其放入笔：

Https：//codepen.io/bureaukamp/pen/zegoaqa

要以更好的方式进行操作，需要对结构进行一些更新。在这里，我将每个手风琴项目包裹在

HTML

部门中。 在下面，我更新了.item

，

Answer 1

＆

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;
}

这个例子应该让您前进。使用CSS中的宽松效果，如果愿意，也将它们添加到

<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>

＆

slideUp()

中。 

仅通过在单击时添加和删除类来完成此操作...

slideDown()

Answer 2

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

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

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

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();

真棒的GBWDEV！ 有什么方法可以使这一部分更加灵活（通用）？

if（$ this.text（）。trim（）==“步骤三”）

获取（地址）“步骤三”作为最后一个元素
或DL的最后DT孩子？