javascript - SlideUp() 动画在第一次单击时不起作用

Question

我有一个我创建的 Accordion 样本；问题很简单:第一次单击任何 Accordion 项目时，slideUp() 动画不起作用。我在链接 jquery 方法方面仍然不太熟练，所以我的问题是:我应该在哪里链接 slideUp() 方法？因为在 .accordion-item 父级上添加和删除类名 .active 会使事情变得复杂。

$(document).ready(function() {
  $("[class^='accordion-item'] > button").on('click', function() {
    $(this).next().slideDown(400).parent().addClass('active').siblings().removeClass('active').children('div').slideUp(400);
  })
})

* {
  box-sizing: border-box;
  outline: none;
}

#accordion {
  width: 100%;
}
#accordion .accordion-item-1 button {
  width: 100%;
  border: none;
  background: cornflowerblue;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  -webkit-transition: box-shadow 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out;
}
#accordion .accordion-item-1 button i {
  position: absolute;
  left: 1rem;
  top: .6rem;
  font-size: 2rem;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}
#accordion .accordion-item-1 button:hover {
  background: #3676e8;
  cursor: pointer;
}
#accordion .accordion-item-1 div {
  padding: 1rem;
  background: #92b4f2;
  color: #fff;
  line-height: 2;
  display: none;
}
#accordion .accordion-item-1.active button {
  background: #3676e8;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
#accordion .accordion-item-1.active button i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#accordion .accordion-item-1.active div {
  display: block;
}
#accordion .accordion-item-2 button {
  width: 100%;
  border: none;
  background: salmon;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  -webkit-transition: box-shadow 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out;
}
#accordion .accordion-item-2 button i {
  position: absolute;
  left: 1rem;
  top: .6rem;
  font-size: 2rem;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}
#accordion .accordion-item-2 button:hover {
  background: #f85441;
  cursor: pointer;
}
#accordion .accordion-item-2 div {
  padding: 1rem;
  background: #fcaca3;
  color: #fff;
  line-height: 2;
  display: none;
}
#accordion .accordion-item-2.active button {
  background: #f85441;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
#accordion .accordion-item-2.active button i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#accordion .accordion-item-2.active div {
  display: block;
}
#accordion .accordion-item-3 button {
  width: 100%;
  border: none;
  background: seagreen;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  -webkit-transition: box-shadow 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out;
}
#accordion .accordion-item-3 button i {
  position: absolute;
  left: 1rem;
  top: .6rem;
  font-size: 2rem;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}
#accordion .accordion-item-3 button:hover {
  background: #21653f;
  cursor: pointer;
}
#accordion .accordion-item-3 div {
  padding: 1rem;
  background: #3bb16f;
  color: #fff;
  line-height: 2;
  display: none;
}
#accordion .accordion-item-3.active button {
  background: #21653f;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
#accordion .accordion-item-3.active button i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#accordion .accordion-item-3.active div {
  display: block;
}
#accordion .accordion-item-4 button {
  width: 100%;
  border: none;
  background: violet;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  -webkit-transition: box-shadow 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out;
}
#accordion .accordion-item-4 button i {
  position: absolute;
  left: 1rem;
  top: .6rem;
  font-size: 2rem;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}
#accordion .accordion-item-4 button:hover {
  background: #e855e8;
  cursor: pointer;
}
#accordion .accordion-item-4 div {
  padding: 1rem;
  background: #f4aff4;
  color: #fff;
  line-height: 2;
  display: none;
}
#accordion .accordion-item-4.active button {
  background: #e855e8;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}
#accordion .accordion-item-4.active button i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#accordion .accordion-item-4.active div {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div id="accordion">
  <div class="accordion-item-1 active">
    <button><i class="fa fa-caret-right"></i><span>Item 1</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item-2">
    <button><i class="fa fa-caret-right"></i><span>Item 2</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item-3">
    <button><i class="fa fa-caret-right"></i><span>Item 3</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item-4">
    <button><i class="fa fa-caret-right"></i><span>Item 4</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
</div>

Answer 1

问题是因为您立即删除了同级 div 上的 active 类。这会导致第一次跳跃。相反，您应该在幻灯片动画完成后删除该类。您可以使用 slideUp() 的回调来执行此操作。

另请注意，您的 CSS 重复次数过多。您可以通过使用基类对常见规则进行分组来简化它，然后将特定颜色添加到目标元素，如下所示:

$(function() {
  $("[class^='accordion-item'] > button").on('click', function() {
    var $btn = $(this);
    $btn.next().slideDown(400);
    $btn.closest('div').addClass('active').siblings().find('div').slideUp(400, function() {
      $(this).closest('.accordion-item').removeClass('active')
    });
  });
})

* {
  box-sizing: border-box;
  outline: none;
}

#accordion {
  width: 100%;
}

#accordion .accordion-item button {
  width: 100%;
  border: none;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  -webkit-transition: box-shadow 400ms ease-in-out;
  transition: box-shadow 400ms ease-in-out;
}

#accordion .accordion-item-1 button {
  background: cornflowerblue;
  cursor: pointer;
}

#accordion .accordion-item button i {
  position: absolute;
  left: 1rem;
  top: .6rem;
  font-size: 2rem;
  -webkit-transition: -webkit-transform 400ms ease-in-out;
  transition: -webkit-transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out;
  transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}

#accordion .accordion-item.active button {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
}

#accordion .accordion-item.active button i {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

#accordion .accordion-item div {
  padding: 1rem;
  color: #fff;
  line-height: 2;
  display: none;
}

#accordion .accordion-item.active div {
  display: block
}

;
#accordion .accordion-item-1 button {
  background: cornflowerblue;
}

#accordion .accordion-item-1 button:hover,
#accordion .accordion-item-1.active button {
  background: #3676e8;
}

#accordion .accordion-item-1 div {
  background: #92b4f2;
}

#accordion .accordion-item-2 button {
  background: salmon;
}

#accordion .accordion-item-2 button:hover,
#accordion .accordion-item-2.active button {
  background: #f85441;
}

#accordion .accordion-item-2 div {
  background: #fcaca3;
}

#accordion .accordion-item-3 button {
  background: seagreen;
}

#accordion .accordion-item-3 button:hover,
#accordion .accordion-item-3.active button {
  background: #21653f;
}

#accordion .accordion-item-3 div {
  background: #3bb16f;
}

#accordion .accordion-item-4 button {
  background: violet;
}

#accordion .accordion-item-4 button:hover,
#accordion .accordion-item-4.active button {
  background: #e855e8;
}

#accordion .accordion-item-4 div {
  background: #f4aff4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<div id="accordion">
  <div class="accordion-item accordion-item-1 active">
    <button><i class="fa fa-caret-right"></i><span>Item 1</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item accordion-item-2">
    <button><i class="fa fa-caret-right"></i><span>Item 2</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item accordion-item-3">
    <button><i class="fa fa-caret-right"></i><span>Item 3</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
  <div class="accordion-item accordion-item-4">
    <button><i class="fa fa-caret-right"></i><span>Item 4</span></button>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div>
  </div>
</div>