0

请参阅此处的示例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();
   });
});

我想让最小高度（默认）和最大高度（打开后）的高度为自动，这样我就可以将 jquery 代码用于我需要这种效果的任何容器。

可能吗？

我想只在 CSS 中设置 min-height ，对于高度，它应该根据 div 中有多少项目而采用高度。

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

4

1 回答 1

1

这是可能的，只是有点骇人听闻。你可以克隆元素，检查它的高度，然后动画到那个高度。反向用于最小化元素。

$(".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/

于 2012-04-10T13:18:47.130 回答