Javascript 如何设置div的全高动画？

我有三个div，我有一个函数，当我点击按钮时，可以显示它们的全部内容。 但是我认为这个函数太复杂了，我想要一些没有那么多if语句的函数

如果我有10个div，这个函数会太长，如何缩短它

$(document).ready(function () {
var h1 = $(".pt1").height(), h2 = $(".pt2").height(), h3 = $(".pt3").height();
$(".post-text").height("72px");
var read = $(".post-read");

read.click(function () {
    if ($(this).html() === 'Read more') {
        $(this).html("Show less");
        if ($(this).prev().attr('class') == "post-text pt1") {
            $(this).prev().animate({
                height : h1
            }, 'slow');
        } else if ($(this).prev().attr('class') == "post-text pt2") {
            $(this).prev().animate({
                height : h2
            }, 'slow');
        } else {
            $(this).prev().animate({
                height : h3
            }, 'slow');
        }
    } else {
        $(this).html("Read more");
        $(this).prev().animate({
            height : 72
        }, 'slow');
    }
});
});

HTML:

---

jsFiddle:

这是您应该编写jQuery插件的情况。这很简单：

(function ($) {
    $.fn.readMore = function () {
        return this.each(function () {
            var h = $(this).height();
            $(this).height("72px");
            $(this).next().click(function () {
                if ($(this).html() === 'Read more') {
                    $(this).html("Show less");
                    if ($(this).prev().hasClass('post-text')) {
                        $(this).prev().animate({
                            height: h
                        }, 'slow');
                    }
                }
                else {
                    $(this).html("Read more");
                    $(this).prev().animate({
                        height: 72
                    }, 'slow');
                }
            });
        });
    };
})(jQuery);

$(function() {
    $('.post-text').readMore();
});

---

这是一个权杖，你应该改进它。例如，您不应该使用类似于

$（this）.html（）==='Read more'

-如果您更改文本，您的代码将停止工作。

我认为这可能有效：

read.click(function () 
{
   if ($(this).html() === 'Read more') 
   {
      $(this).html("Show less");

      var thisClass = $(this).prev().attr('class');
      var thisId = thisClass.replace('post-text ', '');
      var thisHeight = $('.' + thisId).height();

      $(this).prev().animate(
      {
          height : thisHeight
      }, 'slow'); 
   } 
   else 
   {
        $(this).html("Read more");
        $(this).prev().animate({
            height : 72
        }, 'slow');
   }
});

---

还可以添加jfiddle.net链接。您可以使用数据属性保存div的高度，然后在动画功能中使用它$（#div1”）.data（#data，$（#div1”）.height））$（this.prev（）.animate（{height:$（this.prev（）.data（'height'））}，'slow'）；谢谢，我会做更多的更新，这只是一个草稿，对吗？例如，我会将选项传递给plugin.sure:-）这可能是一个真正强大的pluginThanks的开始，这就是我一直在寻找的东西！：）

(function ($) {
    $.fn.readMore = function () {
        return this.each(function () {
            var h = $(this).height();
            $(this).height("72px");
            $(this).next().click(function () {
                if ($(this).html() === 'Read more') {
                    $(this).html("Show less");
                    if ($(this).prev().hasClass('post-text')) {
                        $(this).prev().animate({
                            height: h
                        }, 'slow');
                    }
                }
                else {
                    $(this).html("Read more");
                    $(this).prev().animate({
                        height: 72
                    }, 'slow');
                }
            });
        });
    };
})(jQuery);

$(function() {
    $('.post-text').readMore();
});

read.click(function () 
{
   if ($(this).html() === 'Read more') 
   {
      $(this).html("Show less");

      var thisClass = $(this).prev().attr('class');
      var thisId = thisClass.replace('post-text ', '');
      var thisHeight = $('.' + thisId).height();

      $(this).prev().animate(
      {
          height : thisHeight
      }, 'slow'); 
   } 
   else 
   {
        $(this).html("Read more");
        $(this).prev().animate({
            height : 72
        }, 'slow');
   }
});