slideUp（）动画在第一次点击时不起作用

时间：2017-10-17 11:03:59

标签： javascript jquery

我有一个我创建的样本手风琴;问题很简单：slideUp()动画在第一次点击任何手风琴项目时都不起作用。我在链接jquery方法时仍然不那么熟练所以我的问题是：我应该在哪里链接slideUp()方法？因为在.active父项上添加和删除类名.accordion-item会使其复杂化。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("[class^='accordion-item'] > button").on('click', function() {
    $(this).next().slideDown(400).parent().addClass('active').siblings().removeClass('active').children('div').slideUp(400);
  })
})
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

问题是因为您立即删除兄弟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>

答案 1 :(得分：0)

将display:block添加到您的活动手风琴div中的div最初将解决您的问题

$(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 style="display:block">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>

相关问题
最新问题