Question

虽然有很多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);

Answer 1

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

比在每个链接上使用data-选择要打开的部分。（或使用.next("p")）

这样你就有了一个包装器，现在你只需打开.children("p") . hide() ;就可以打开它。

修改如果必须使用变量和布尔表达式，请查看sessionStorage。

可能类似于sessionStorage.accordion_current = "#"+openAndCloseArea.id

和$(sessionStorage.accordion_current).hide();

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

在打开单击之前关闭jQuery手风琴插件中的open div

1 个答案: