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>