jQuery的手风琴问题

问题描述：

得到了与我家有问题作出的手风琴。它可能是以低效的方式完成的。jQuery的手风琴问题

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>

不知道这是一个问题，尝试这个办法：选择标题打开它，再单击左键关闭....标题的背景保持蓝色.. – 2012-08-22 13:07:44

答

因为animtion一秒钟运行，当你按下一个新的标签它仍在运行。

试试停止每次点击动画：

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

感谢您的答复，我将如何去增加一个选定的班级？ '.na'类作为选定的参数，不是？好吧 – nixblu

我想我懂了工作，看到我的编辑:)谢谢 – Aesthete

你的唯美主义，米克尔和理查德。你们都帮忙，问题分类。与动画的问题是类似这里详述问题：http://*.com/questions/1335461/jquery-slide-is-jumpy 但现在已经解决了 – nixblu

答

设置背景颜色改回原来的前添加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/

这将取消任何正在运行的动画因此不再继续使用突出显示的颜色进行动画制作。

不知道这是一个问题，试试这个：选择标题打开它，然后再次单击关闭它....标题的背景保持蓝色.. – 2012-08-22 13:08:10

答

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

至于“锯齿” -part ...这是因为没有了速度，其中内容被折叠和展开略有差别。你只能通过将整个东西封装在具有固定高度的div中来解决它并隐藏溢出（overflow：hidden;在CSS中）。

jQuery的手风琴问题

相关推荐