Question

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

我尝试过CSS，但它不起作用：

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

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

如何让这些过渡顺利进行？

如果我能用纯CSS做到这一点，那么首选，否则JS会起作用，但我不确定如何？

Answer 1

Lynda，我很感激你的代码，在基础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");    
        }
});

Answer 2

事实证明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");
 });
});

Answer 3

您可以使用此结构：

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

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

 })
});

它的工作正常。

Answer 4

这里是一个更加深入了解jQuery的解决方案，以及利用.eq()专门定位点击所有的第一个（位置0）a元素li元素。从理论上讲，如果您添加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 on the Foundation forums. 注意：这是使用Foundation 5.5标记。如果您使用以前的版本，只需将li的所有用途替换为dd。

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

4 个答案: