javascript - 在 div 组中切换单个 div 的高度

Question

我在一页上有许多具有相同类的 div。我希望他们有一个固定的高度，当点击一个切换按钮时，它会扩展到全高。到目前为止，我已经从互联网上收集了一个脚本来执行此操作，但目前它会展开页面上的所有 div，而不仅仅是与展开按钮关联的那个 div。有人可以帮我修复脚本，使其只扩展一个 div，如果扩展了另一个 div 可能会重置它，并在再次单击扩展按钮时将其切换回来吗？

jQuery(文档).ready(函数($) {

    $.fn.toggleClick = function() {
        var functions = arguments;
        return this.click(function() {
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments); 
            iteration = (iteration + 1) % functions.length; 
            $(this).data('iteration', iteration); 
            });
    };

var $dscr = $(".textblock"),
    $switch = $(".expand a"),
    $initHeight = 130; // Initial height

$dscr.each(function() {
    $.data(this, "realHeight", $(this).height());    // Create new property realHeight
    }).css({ overflow: "hidden", height: $initHeight + 'px' });

    $switch.toggleClick(function() {
      $dscr.animate({ height: $dscr.data("realHeight") }, 300);
      $switch.html("-");

    }, function() {
        $dscr.animate({ height: $initHeight}, 300);
        $switch.html("+");
    });

});

到目前为止，请参阅我的脚本的 jsfiddle: http://jsfiddle.net/N9DfH/1/

Answer 1

http://jsfiddle.net/N9DfH/21/

jQuery(document).ready(function () {

    $.fn.toggleClick = function () {
        var functions = arguments;
        return this.each(function () {
            var divel = $(this);
            $('.expand a', divel.parent()).click(function () {
                var iteration = $(this).data('iteration') || 0;
                functions[iteration].apply(divel, arguments);
                iteration = (iteration + 1) % functions.length;
                $(this).data('iteration', iteration);
            });
        });
    };

    var $dscr = $(".textblock"),
        $initHeight = 130; // Initial height

    $dscr.each(function () {
        $.data(this, "realHeight", $(this).height()); // Create new property realHeight
    }).css({
        overflow: "hidden",
        height: $initHeight + 'px'
    }).toggleClick(function () {
        this.animate({
            height: this.data("realHeight")
        }, 300);
    }, function () {
        this.animate({
            height: $initHeight
        }, 300);
    });
});