在div組中切換單個div的高度

Question

我在一個頁面上有許多具有相同類的div。 我希望他們有一個固定的高度，當點擊一個切換按鈕時，它會擴展到全高。 到目前為止，我已經從互聯網上組裝了一個腳本，但是目前它擴展了頁面上的所有div，而不僅僅是與擴展按鈕相關聯的div。 有人可以幫我修復腳本，這樣它只會擴展一個div，如果它被展開可能會重置另一個div，並在再次單擊展開按鈕時將其切換回來？

jQuery（document）.ready（function（$）{

    $.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);
    });
});