javascript - jQuery 手风琴问题

Question

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

http://jsfiddle.net/arzEk/1

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 中）。