jQuery协议问题

jQuery Accordion Issues

本文关键字：问题 协议 jQuery      更新时间：2023-09-26

我的自制手风琴有问题。这可能是以一种低效的方式进行的。

http://jsfiddle.net/arzEk/1

html和jQ在jfidd^^上

第一个问题：如果你点击一个项目，然后快速点击另一个，当只有活动的项目应该变成蓝色时，两者都会变成蓝色，这可能是我制作"动画"的方式有问题。

第二个问题目前不是很明显，但在页面上（可能是在有更多内容的时候），它在幻灯片的末尾突然下降，只是没有达到应有的平滑程度。

代码：

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

在将背景颜色设置回原始颜色之前添加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/

这将取消任何正在运行的动画，因此不再继续为高亮显示的颜色设置动画。

因为动画会运行一秒钟，所以当你按下一个新的选项卡时，它仍然在运行。

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

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

是的，您应该使用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');
});

至于"jagging"部分。。。这是因为内容折叠和扩展的速度略有不同。你只能通过将整个东西包装在一个固定高度的div中并隐藏溢出（overflow：隐藏；在css中）来解决这个问题。

相关文章：