Question

我正在尝试模仿新的Gmail菜单折叠样式。因此，当菜单很长（超过一定高度的像素）时，我想将其折叠到预定高度。当暴露的菜单区域悬停在上面时，我想将菜单扩展到原始菜单高度。再次离开该区域时，将高度降低到预定值...冲洗并重复。这是我到目前为止的jQuery：

/**
 * @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;
});

Answer 1

我认为您应该使用height: auto恢复div。

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

Answer 2

如果你只想制作样式差异，我会限制JQuery删除/添加一个类constrained并在CSS中设置样式。

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

更好的是，您可以通过定位#menu:hover ...而不是#menu.constrained ...来完全跳过JQuery！

人们过度使用JQuery。

inb4动画：有CSS动画，他们甚至可以利用图形加速等高级系统资源。

Answer 3

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

            });
        });
    });

这样你可以在更改之前保存元素的原始高度，然后恢复它！

类似Gmail的菜单会崩溃并展开

3 个答案: