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

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

1 个答案: