Question

我的自制手风琴出了问题。它可能以低效的方式完成。

html和jQ在jfiddle上^^

第一个问题： 如果你单击一个项目然后快速单击另一个项目，当只有活动应该变为蓝色时，两个项目都将变为蓝色，这可能与我完成“动画”的方式有关。

第二个问题 目前不是很明显，但在页面上（可能是在内容较多的情况下）它会在滑动结束时突然出现，而不是应该如此平滑。

代码：

$(document).ready(function(){                                                                                     
    $(".accordion").click(function () {
        $('.acc-content', this).removeClass("na");
        $('.na').slideUp("medium");    
        $('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);
        $('.acc-title').css("backgroundColor", "#77787B");                                                                         
        $('.acc-content', this).slideToggle("medium");                  
        $('.acc-content', this).addClass("na");                    
    });    
});

HTML

<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>
<div class="accordion">
    <div class="acc-title">Test Title</div>
    <div class="acc-content">Lorem ipsum dolor sit amet</div>
</div>

Answer 1

在将背景颜色设置回原始颜色之前添加stop()调用：

$(".accordion").click(function () {
    $('.acc-content', this).removeClass("na");
    $('.na').slideUp("medium");
    $('.acc-title').stop().css("backgroundColor", "#77787B");   // on this line     
    $('.acc-title', this).animate({"backgroundColor":"#00bff3"},1000);
    $('.acc-content', this).slideToggle("medium");
    $('.acc-content', this).addClass("na");           
});

http://jsfiddle.net/arzEk/2/

这会取消任何正在运行的动画，因此不再继续动画显示突出显示的颜色。

Answer 2

由于动画会运行一秒钟，因此当您按下新标签页时，它仍然在运行。

尝试在每次点击时停止动画：

$('.acc-title').css("backgroundColor", "#77787B");
$('.acc-title').stop(); // Stop the currently-running animation
$('.acc-title', this).animate({"backgroundColor":"#00bff3"}, 1000);

Answer 3

是的，您应该使用stop（）来停止任何正在进行的动画。如果你使用动画的CSS3过渡，这将更简单，更易于维护。

http://jsfiddle.net/spuCh/1/

$('.acc-title').click(function() {
    $('.acc-content.na')
        .stop()
        .slideUp()
        .removeClass('na')
            .prev() // The title
                .removeClass('selected');

    $(this)
        .stop()
        .addClass('selected')
        .next() // The content
            .stop()
            .slideDown()
            .addClass('na');
});

至于“摇摆” - 部分......这是因为内容崩溃和扩展的速度略有不同。你只能通过将整个东西包裹在具有固定高度的div中来解决它并隐藏溢出（溢出：隐藏;在css中）。

jQuery手风琴问题

3 个答案: