一个用于多个展开/折叠操作的开关

时间:2013-07-16 21:56:35

标签: jquery toggleclass

很抱歉打扰你,但我坚持这个。 我正在尝试制作一个可以作为开关的按钮,当你按下它时,它需要同时折叠和扩展不同的div。

我希望隐藏一个div并显示另一个div。当你按下开关时,显示的div将被隐藏,隐藏的div将显示等等。每当你按下按钮时。

我尝试用jQuery进行一些实验,但都没有运气,因为不幸的是我并不熟练。我有想法让jQuery搜索#main中称为'collapse'的每个div。但它只会获取第一个崩溃div并忽略父(#main)div中的其他“崩溃”div。

PS:我使用h4.expand进行切换并触发事件。

这是我的代码:

;(function($) {
$.fn.toggler = function(options) {
    var o = $.extend({}, $.fn.toggler.defaults, options);

    var $this = $(this);
    $this.wrapInner('<a style="display:block" href="#" title="Expand/Collapse" />');

    return this.each(function() {
      var container;
      container = '#main';
      if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 

      $(this).click(function() {
        $(this).find('a').toggleClass('open').end().next('div.collapse')[o.method](o.speed);
        return false;
    });
});};
$.fn.toggler.defaults = {
     speed : 'slow'
};

var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }

$.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() { 
    if (msie) { this.style.removeAttribute('filter'); }
    if (jQuery.isFunction(callback)) { callback(); }
  }); 
};
})(jQuery);

0 个答案:

没有答案