Question

如果有人可以合并下面找到的两个脚本，我将不胜感激。我希望能够将第一个脚本的平滑折叠功能与第二个脚本中的单一选项卡扩展功能结合起来。我无法完全添加代码，因此请在需要时参考链接。

我真的很感激！

脚本1 :(完成 - http://jsfiddle.net/HcJJZ/3/）

$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
    var el = $(this),
        mode = $.effects.setMode(el, o.mode || "show");
    el.animate({
        height: mode,
        opacity: mode
    }, {
        queue: false,
        complete: done
    });
};
$('.mytabs').tabs({
    hide: "heightFade",
    show: "heightFade",
    collapsible: true,
    selected: -1 
});

脚本2 :(完成 - http://jsfiddle.net/fb0z3ezd/4/）

var inactiveOpts = {
active: false,
show: {
    effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
    tabsOpts = {
        collapsible: true,
        beforeActivate: function (evt, ui) {
            $tabs.not(this).tabs("option", inactiveOpts)
        },
        activate: function (evt, ui) {
            $(currTab).tabs('option', {
                show: false
            });
        }
    }
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);

Answer 1

试试这个：

这是JSFIDDLE：enter link description here

  $(document).ready(function() {
    $.effects.effect.heightFade = function(o, done) {
        var el = $(this),
            mode = $.effects.setMode(el, o.mode || "show");
        el.animate({
            height: mode,
            opacity: mode
        }, {
            queue: false,
            complete: done
        });
    };
    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "fade",
        pauseOnHover: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "fade",
        slideshow: false,
        pauseOnHover: true,
        useCSS: false,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });
var inactiveOpts = {
    active: false,
    show: {
        effect: 'blind'
    }
}

var $tabs = $(".tabs").each(function () {
    var currTab = this,
        tabsOpts = {
            collapsible: true,
            beforeActivate: function (evt, ui) {
                $tabs.not(this).tabs("option", inactiveOpts)
            },
            activate: function (evt, ui) {
                $(currTab).tabs('option', {
                    show: false
                });
            }
        }
    $.extend(tabsOpts, inactiveOpts);
    $(this).tabs(tabsOpts);

});
});

希望有所帮助

组合两个选项卡脚本来制作一个

1 个答案: