如何在页面加载时打开手风琴的第二个标签

时间:2015-11-05 06:06:13

标签: javascript jquery html css

如何在页面加载后在JQuery Accordion中默认打开第二个标签。

我的代码是,

$(document).ready(function () {
    $('#buttons').akordeon();
    $('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });
});

<div class="akordeon" id="button-less">
        <div class="akordeon-item expanded">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                    <div class="akordeon-heading">
                        First Panel
                    </div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nibh nec sem.
                </div>
            </div>
        </div>
        <div class="akordeon-item">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                    <div class="akordeon-heading">
                        Second Panel
                    </div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                    Donec tortor velit, volutpat id adipiscing ut, tincidunt vitae mi. Duis imperdiet.
                </div>
            </div>
        </div>
        <div class="akordeon-item">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                    <div class="akordeon-heading">
                        Third Panel
                    </div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                    <p>
                        Nullam congue erat id felis tristique tincidunt. In tincidunt mi sit amet sapien.</p>
                </div>
            </div>
        </div>
    </div>

我的JQuery是,

(function ($) {
$.fn.extend({

    akordeon: function (options) {
        var settings = $.extend({ expandedItem: 0, expandSpeed: 200, toggle: false, expandText: '&ndash;', collapseText: '+', buttons: true, hiddenItem: -1, itemsOrder: [] }, options);
        return this.each(function () {

            var expandedItem = settings.expandedItem;
            var speed = settings.expandSpeed;
            var expandText = settings.expandText;
            var collapseText = settings.collapseText;
            var isToggle = settings.toggle;

            var akordeon = $(this);
            if (!akordeon.hasClass('akordeon'))
                akordeon.addClass('akordeon');

            if (settings.itemsOrder != null && settings.itemsOrder != undefined && settings.itemsOrder.length > 0) {
                if (settings.itemsOrder.length != akordeon.find('.akordeon-item').length) {
                    alert('Parameter value mismatch with total items');
                }
                else {
                    var items = akordeon.find('.akordeon-item').clone(true);
                    akordeon.find('.akordeon-item').remove();

                    $(settings.itemsOrder).each(function () {
                        akordeon.append(items.eq(this));
                    });
                }
            }
            $('.akordeon-item', akordeon).each(function () {
                var body = $(this).find('.akordeon-item-body');
                var h = body.outerHeight();
                body.data('h', h);
                $(this).find('.akordeon-item-head').addClass('akordeon-border-bottom');
                body.addClass('akordeon-border-bottom');
                if (settings.buttons)
                    $(this).find('.akordeon-item-head-container').prepend('<div class="akordeon-icon"><span>' + collapseText + '</span></div>');
            });
            if (settings.hiddentItem > -1) {
                var hiddenItem = $('.akordeon-item', akordeon).eq(settings.hiddenItem).hide();

                hiddenItem.find('.akordeon-item-head', akordeon).last().removeClass('akordeon-border-bottom');
                hiddenItem.find('.akordeon-item-body', akordeon).last().removeClass('akordeon-border-bottom');
            }
            $('.akordeon-item .akordeon-item-head', akordeon).last().removeClass('akordeon-border-bottom');
            $('.akordeon-item .akordeon-item-body', akordeon).last().removeClass('akordeon-border-bottom');
            $('.akordeon-item:first').addClass('akordeon-item-first');
            $('.akordeon-item:last').addClass('akordeon-item-last');
            $('.akordeon-item', akordeon).removeClass('expanded').addClass('collapsed');
            $('.akordeon-item.collapsed .akordeon-item-body', akordeon).css({ height: 0 });
            expandItem($('.akordeon-item', akordeon).eq(expandedItem));

            $('.akordeon-item-head-container', akordeon).click(function () {
                var currentItem = $(this).parents('.akordeon-item');
                var previousItem = akordeon.find('.akordeon-item.expanded');
                var isExpanded = currentItem.hasClass('expanded');
                if (!isToggle) {
                    if (!isExpanded) {
                        collapseItem(previousItem);
                        expandItem(currentItem);
                    }
                }
                else {
                    if (isExpanded)
                        collapseItem(currentItem);
                    else
                        expandItem(currentItem);
                }
            });

            function expandItem(item) {
                var body = item.find('.akordeon-item-body');
                var h = body.data('h');
                body.animate({ height: h }, speed, function () {
                    item.removeClass('collapsed').addClass('expanded').find('.akordeon-icon span').html(expandText);
                });
            }
            function collapseItem(item) {
                var body = item.find('.akordeon-item-body');
                body.animate({ height: 0 }, speed, function () {
                    item.removeClass('expanded').addClass('collapsed').find('.akordeon-icon span').html(collapseText);
                });
            }
        });
    }
});
})(jQuery);

我已经尝试了很多。但没有成功。有什么解决方案可以在我的代码中实现这一点。提前谢谢。

0 个答案:

没有答案
相关问题