0

虽然有几十个 jQuery 手风琴插件,但我想为我正在处理的项目创建一些自定义的东西。无论如何,一切正常(这里是提琴手 - http://jsfiddle.net/sunnyday195/g9SvF/)除了我想添加布尔选项,如果其他手风琴 div 是打开的,那么首先关闭它们应该关闭(立即或幻灯片)然后打开悬停或单击的那个。这是我的 JS 代码:

    (function($) {
    $.fn.extend({
        //PLUGIN NAME
        accordian: function(options) {
            //DEFAULT VARIABLES        
            var defaults = {
                imageShow: '',
                openOnload: 'no',
                imageHide: '',
                actionType: 'instant',
                speed: 500,
                userActionType: 'click',
                openAndCloseArea: ''
            };
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                var obj = $(this);
                var openAndCloseArea = $(o.openAndCloseArea);
                var imageShow = $(o.imageShow);
                var imageHide = $(o.imageHide);
                var openOnload = o.openOnload;
                var actionType = o.actionType;
                var speed = o.speed;
                var userActionType = o.userActionType;
                var animationDone = true;
                //START SCRIPT ENGINE
                //BELOW SETS ONLOAD SETTINGS BASED ON ABOVE VARIABLES
                var instant = function(type, openAndCloseArea, obj, imageHide, imageShow) {
                        if (type === 'instantShow') {
                            openAndCloseArea.css('display', 'block');
                            openAndCloseArea.data("name", "show");
                            obj.addClass('activeSA');
                            openAndCloseArea.addClass('activeSAArea');
                            imageHide.show();
                            imageShow.hide();
                        }
                        if (type === 'instantHide') {
                            openAndCloseArea.css('display', 'none');
                            openAndCloseArea.data("name", "hide");
                            obj.removeClass('activeSA');
                            openAndCloseArea.removeClass('activeSAArea');
                            imageHide.hide();
                            imageShow.show();
                        }
                    }
                var slide = function(type, openAndCloseArea, obj, imageHide, imageShow) {
                        if (type === 'slideShow') {
                            openAndCloseArea.data("name", "show");
                            openAndCloseArea.addClass('activeSAArea');
                            obj.addClass('activeSA');
                            imageHide.show();
                            imageShow.hide();
                        }
                        if (type === 'slideHide') {
                            openAndCloseArea.data("name", "hide");
                            obj.removeClass('activeSA');
                            openAndCloseArea.removeClass('activeSAArea');
                            imageHide.hide();
                            imageShow.show();
                        }
                    }
                    //DOES INITIAL ONLOAD WORK
                if (openOnload === false) {
                    instant('instantHide', openAndCloseArea, obj, imageHide, imageShow);
                } else {
                    instant('instantShow', openAndCloseArea, obj, imageHide, imageShow);
                }
                obj.on(userActionType + ".accordian", function(event) {
                    //INSTANTLY SHOWS
                    if (actionType === 'instant') {
                        var boxStatus = openAndCloseArea.data("name");
                        if (boxStatus === 'hide') {
                            instant('instantShow', openAndCloseArea, obj, imageHide, imageShow);
                            return false;
                        } else {
                            instant('instantHide', openAndCloseArea, obj, imageHide, imageShow);
                            return false;
                        }
                    }
                    //DOES SLIDE EFFECT
                    if (actionType === 'slide' && animationDone === true) {
                        animationDone = false;
                        var boxStatus = openAndCloseArea.data("name");
                        if (boxStatus === 'hide') {
                            openAndCloseArea.slideDown(speed, function() {
                                animationDone = true;
                            });
                            slide('slideShow', openAndCloseArea, obj, imageHide, imageShow);
                            return false;
                        } else {
                            openAndCloseArea.slideUp(speed, function() {
                                animationDone = true;
                            });
                            slide('slideHide', openAndCloseArea, obj, imageHide, imageShow);
                            return false;
                        }
                    }
                });
            });
        }
    });
})(jQuery);
4

1 回答 1

0

我认为你应该<div></div>整套手风琴,而不是为每个元素调用函数。

而不是data-在每个链接上使用来选择要打开的部分。(或使用.next("p")

这样你就有了一个包装器,现在你可以在打开之前简单地调用。.children("p").hide();



编辑: 如果您必须使用变量和布尔表达式,请查看sessionStorage

可能是这样的sessionStorage.accordion_current = "#"+openAndCloseArea.id

$(sessionStorage.accordion_current).hide();

请注意,您需要支持的浏览器。

于 2013-08-02T21:00:03.583 回答