accordion - 您如何为 Zurb Foundation 4 中手风琴部分的打开和关闭设置动画？

Question

您如何为 Zurb Foundation 4 中手风琴部分的打开和关闭设置动画？

我在 Zurb Foundation 的 Google 小组上进行了广泛的搜索，也找不到任何答案。

Answer 1

我写了一个相当简单的 jQuery 插件来让它工作。该插件具有默认选项，同时还允许通过 data-options 属性进行覆盖。

在 Foundation 5 上测试。

这是插件：

(function($) {
    $.fn.accordionAnimated = function() {

        var
            $accordion = this,
            $items = $accordion.find('> dd'),
            $targets = $items.find('.content'),
            options = {
                active_class : 'active',    // class for items when active
                multi_expand: false,        // whether mutliple items can expand
                speed : 500,                // speed of animation
                toggleable: true            // setting to false only closes accordion panels when another is opened
            }
        ;

        $.extend(options, Foundation.utils.data_options($accordion));

        $items.each(function(i) {
            $(this).find('a:eq(0)').on('click.accordion', function() {
                if(!options.toggleable && $items.eq(0).hasClass(options.active_class)) {
                    return;
                }

                $targets.eq(i)
                    .stop(true, true)
                    .slideToggle(options.speed);

                if(!options.multi_expand) {
                    $targets.not(':eq('+i+')')
                        .stop(true, true)
                        .slideUp(options.speed);
                }
            });
        });
    };
}(jQuery));

并且插件只是通过调用

$('.accordion').accordionAnimated();

希望这可以帮助某人。

Answer 2

假设您使用的是 Foundation 的 HTML 类：

.top-bar-section {
  -webkit-transition: 0.2s all ease-in;
  -moz-transition: 0.2s all ease-in;
  -o-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in; 
}