類似Gmail的菜單摺疊並展開

我正在嘗試模仿新的Gmail菜單摺疊樣式。所以當一個菜單非常長（超過一定的像素高度）時，我想將它摺疊到預定的高度。當外露的菜單區域懸停時，我想將菜單展開到原始菜單高度。當再次離開該區域時，將高度降低至預定值......沖洗並重復。這是jQuery的我到目前爲止：類似Gmail的菜單摺疊並展開

/** 
* @author Les Peabody 
*/ 
(function ($) { 
    $(document).ready(function() { 
     $(".collapsible").css('height','200px'); 
     $(".collapsible").mouseenter(function() { 
      $(".collapsible").animate({ 
       height: '400px' 
      },300, function() { 

      }); 
      }); 
     $(".collapsible").mouseleave(function() { 
      $(".collapsible").animate({ 
       height: '200px' 
      },300, function() { 

      }); 
     }); 
    }); 
})(jQuery);

基本上我在做什麼是階級「可摺疊」的任何元素分配了此功能。我遇到的問題是我不知道如何去恢復受影響菜單的原始高度。有小費嗎？

編輯：從以下接受的答案接收提示後，我現在有這個代碼正在工作。

$(".collapsible").mouseenter(function() { 
    $(this).switchClass("constrained","unconstrained",300); 
    return false; 
}); 
$(".collapsible").mouseleave(function() { 
    $(this).switchClass("unconstrained","constrained",300); 
    return false; 
});

來源

2011-12-14 Lester Peabody

如果你要只是讓風格不同，我將限制jQuery來刪除/添加一個類constrained和CSS設置的樣式。

#menu.constrained { 
    max-height: 200px; 
    ... 
}

更妙的是，你可以完全跳過JQuery的通過瞄準#menu:hover ...而不是#menu.constrained ...！

人們過度使用JQuery。

inb4動畫：有CSS動畫，他們甚至可以使用圖形加速等高級系統資源。

來源

2011-12-14 18:01:56 ANeves

我覺得你應該用height: auto來恢復div。

$(".collapsible").animate({ 
    height: 'auto' 
},300);

來源

2011-12-14 17:58:15 Filip

在mouseenter處理程序中應用此功能不起作用。 – 2011-12-14 18:01:10

在這種情況下，我想我需要看一個http://jsfiddle.net/的例子。 – Filip 2011-12-14 18:04:00

var originalHeight; 
$(document).ready(function() { 
     $(".collapsible").css('height','200px'); 
     $(".collapsible").mouseenter(function() { 
      originalHeight = $(this).height(); 
      $(".collapsible").animate({ 
       height: '400px' 
      },300, function() { 

      }); 
      }); 
     $(".collapsible").mouseleave(function() { 
      $(".collapsible").animate({ 
       height: originalHeight; 
      },300, function() { 

      }); 
     }); 
    });

因此，您可以在更改之前保存元素的原始高度，然後恢復它！

來源

2011-12-14 18:10:42 MCSI

類似Gmail的菜單摺疊並展開

回答

相關問題