Javascript 基础5手风琴-过渡速度？

我在一个网站上使用。他们工作，但我想改变过渡速度。当前，当您单击时，它们会立即隐藏一个并显示另一个。我更希望他们立即出现

我尝试了CSS，但没有成功：

.accordion dd > a{ 
   transition: all .5s;
}

注意：我省略了供应商前缀

如何让这些顺利过渡

---

如果我可以使用纯CSS，这是首选，否则JS将工作，但我不确定如何工作？

您可以使用此结构：

$(function() {
  $(".accordion").on("click", "dd", function (event) {

   $("div.active").slideUp(100).removeClass('.active');
       $(this).find(".content").slideDown(100).addClass('active');

 })
});

---

它工作正常。

事实证明，JS是实现这一点的方法：

$(function() {
 $(".accordion").on("click", "dd:not(.active)", function (event) {
   $("dd.active").removeClass('active').find(".content").slideUp("fast");
   $(this).addClass('active').find(".content").slideToggle("fast");
 });
});

---

琳达，我很欣赏你的代码，在基础5中，面板在第二次关闭后保持可见。似乎是jQuery从滑动中添加样式属性造成的。我编辑了它来解决这个问题

$(".accordion").on("click", "dd", function (event) {
        if($(this).hasClass('active')){
            $("dd.active").removeClass('active').find(".content").slideUp("fast");    
        }
        else {
            $("dd.active").removeClass('active').find(".content").slideUp("fast");
            $(this).addClass('active').find(".content").slideToggle("fast");    
        }
});

---

这里有一个使用jQuery更深入的解决方案，它利用

.eq（）

专门针对通过所有

li

元素单击的第一个（位置0）

元素。从理论上讲，如果您添加
multi_expand
配置，这应该是可行的，因为它只针对第一个
a
元素

$(".accordion li").on("click", "a:eq(0)", function (event) {
    var li_parent = $(this).parent();

        if (li_parent.hasClass('active')) {
            $(".accordion li div.content:visible").slideToggle("normal");
        } else {
            $(".accordion li div.content:visible").slideToggle("normal");
            $(this).parent().find(".content").slideToggle("normal");
        }
    });

到Nemanja Andrejevic >强>注释：< /强>这是使用基础5.5标记。如果您使用的是以前的版本，只需将
li
的所有用法替换为
dd
您可以尝试新的结构，过渡：所有1s轻松；不起作用。我也没有使用
div
（我尝试过），而是尝试了
.accordio
和
dd
。不起作用。我确实找到了一个JS解决方案，但有一个问题。请参阅我的编辑。这是一个良好的基础5，但我想扩展它，以便我们可以扩大一个以上的面板一次。现在它一次只能扩展一个面板。