我的自制手风琴有问题。它可能以低效的方式完成。
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>