在打开一个点击之前关闭jQuery的开放式div插件

虽然有几十个jQuery的手风琴插件，我想为我正在开发的一个项目创建一些自定义的东西。无论如何一切正常（这里是提琴手 - http://jsfiddle.net/sunnyday195/g9SvF/），除了我想添加布尔选项，如果其他的手风琴divs打开，然后首先关闭那些，因为他们应该关闭（即时或幻灯片），然后打开一个悬停或点击。这里是我的JS代码：在打开一个点击之前关闭jQuery的开放式div插件

(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);

来源

2013-08-02 Sunny Day

神圣变数，蝙蝠侠！ – SpYk3HH

[你明白了，你在重新发明轮子吗？]（http://api.jqueryui.com/accordion/）我不知道那些“其他几十个人”，但我刚才引用的那个由制作jQuery的相同人员来完成。是的，你可以把它作为一个单独的组件，而不必拥有所有的jQueryUI。如果这是一个“工作”，只是从经验上讲，你没有时间重新发明轮子，只需要获取它的jQueryUI版本并继续前进。 – SpYk3HH

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

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

这种方式，你有一个包装，现在ü可以打开一个以前只需拨打.children("p").hide();。

编辑： 如果必须使用变量和布尔表达式去，看看sessionStorage。

大概就像sessionStorage.accordion_current = "#"+openAndCloseArea.id

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

注意到你需要支持的浏览器。

来源

2013-08-02 21:00:03 mtbnunu

在打开一个点击之前关闭jQuery的开放式div插件

回答

相关问题