1. 首頁
  2. 問答
  3. slideUp（）動畫在第一次點擊時不起作用

slideUp（）動畫在第一次點擊時不起作用

2017-10-17 84 views
1

我有一個我創建的示例手風琴;問題很簡單：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>

來源

2017-10-17 juntarnate16

+0

我沒有得到確切的問題 –

+1

同樣在這裏，代碼片段按預期工作。第一個項目被擴展，當我點擊任何其他項目時，它立即擴展，而第一個項目收縮。 –

+1

問題是因爲單擊紅色（或任何其他封閉部分）時*首先*開放部分立即關閉而不是向上滑動 –

回答

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>

來源

2017-10-17 11:11:50

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>

來源

2017-10-17 11:12:16

+0

您編輯的行在哪裏？ – juntarnate16

+0

檢查'div'裏面的'div class =「accordion-item-1 active」>' –

+0

好吧。謝謝:) – juntarnate16

相關問題

 相關問題