Question

如何为Zurb Foundation 4中手风琴部分的开启和关闭制作动画？

我在Zurb Foundation的Google小组上进行了大量搜索，但在那里找不到任何答案。

Answer 1

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

在基金会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; 
}

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

2 个答案: