Question

请参阅此处示例http://jsfiddle.net/jitendravyas/P6vKf/14/

更新了jsfiddle链接

在这个例子中，我有3个不同的模块用于显示/隐藏，并且所有模块都有不同的高度来显示和隐藏项目。

$(function(){
   $(".more-destination").click(function(){
          $(this).parent().prev("ul").animate({
              height: "500px"
           }, 800, function() {});
          $(this).next(".less-destination").toggle();
          $(this).toggle();
   });

   $(".less-destination").click(function(){
         $(this).parent().prev("ul").animate({
             height: "200px"
          }, 800, function() {});
         $(this).prev(".more-destination").toggle();
         $(this).toggle();
   });
});

我想为Min-height（默认）和Max-height（打开后）设置高度 auto ，这样我就可以将jquery代码用于需要此效果的任何容器。

有可能吗？

我想只在CSS中设置min-height，对于高度，它应该取div的高度。

我不想在javascript中给出任何高度或宽度。仅在CSS中

Answer 1

这是可能的，只是一点点hackery。您可以克隆元素，检查它的高度，然后设置为该高度的动画。反向最小化元素。

$(".more-destination").click(function(e) {
    e.preventDefault();
    var clone = $(this).parent().prev("ul").clone().appendTo('body').height('auto');
    var height = clone.height();
    clone.remove();

    $(this).parent().prev("ul").animate({
        height: height
    }, 800, function() {});

    $(this).next(".less-destination").toggle();
    $(this).toggle();
});

$(".less-destination").click(function(e) {
    e.preventDefault();
    var clone = $(this).parent().prev("ul").clone().appendTo('body').height('');
    var height = clone.height();
    clone.remove();

    $(this).parent().prev("ul").animate({
        height: height
    }, 800, function() {});

    $(this).prev(".more-destination").toggle();
    $(this).toggle();
});

jsFiddle：http://jsfiddle.net/P6vKf/8/

如何为此jquery切换提供自动高度（显示/隐藏）

1 个答案: