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

Question

我有一個示例手風琴。 問題很簡單：第一次單擊任何手風琴項目時， slideUp()動畫不起作用。 我仍然不擅長鏈接jquery方法，所以我的問題是：應該在哪里鏈接slideUp()方法？ 因為在.active .accordion-item父.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> 

Answer 2

在您的活動手風琴div內的div中添加display:block可以解決您的問題

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