您的位置: 首页  >  技术问答  >  slideUp（）动画在第一次点击时不起作用

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

分类: 技术问答 • 2022-06-04 17:22:09
问题描述：

我有一个我创建的示例手风琴;问题很简单：slideUp()动画在第一次点击任何手风琴项目时不起作用。我仍然不擅长链接jquery方法，所以我的问题是：我应该在哪里链接slideUp()方法？因为添加和删除类别名称.active父母使其复杂化。slideUp（）动画在第一次点击时不起作用

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

+0

我没有得到确切的问题 –

+1

同样在这里，代码片段按预期工作。第一个项目被扩展，当我点击任何其他项目时，它立即扩展，而第一个项目收缩。 –

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

答

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

+0

您编辑的行在哪里？ – juntarnate16

+0

检查'div'里面的'div class =“accordion-item-1 active”>' –

+0

好吧。谢谢:) – juntarnate16

相关推荐