jQuery将div的高度设置为文本的大小

Question

我已经构建了一个简单的动画功能，您单击一个展开框，我宁愿不使用插件。

目前它看起来像这样：

$('#one').css("height", "22");
    $('#t1').click(function() {
      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#one').animate({height: '120px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      }
});

但问题是，如果div内的文本溢出，那我怎么能把它设置为文本的高度？ 我希望这是有道理的！

HTML：

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"><img src="<?php echo home_url(); ?>/img/arrow.png" alt="Arrow" /></a></p>
        <?php include 'availability.php'; ?>
    </div>
</div><!-- END.#rightBox -->

Answer 1

我接近这个的方法是计算所有孩子的身高，然后开始到特定身高的动画。 见下文。

看到这个jsFiddle 。

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"><img src="/img/arrow.png" alt="Arrow" /></a></p>
        <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <span>More Sample text</span>        
    </div> </div>​

jQuery的/ JavaScript的

$('#one').css({"height": "22px", "background-color": "red"});

    $('#t1').click(function() {

      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        var height = 0;//initialize a height
        $(this).closest("div").children().each(function(){//this loops through each child element
           height += $(this).outerHeight(true);//this sums up the height
        });
        $('#one').animate({height: height + 'px'},500);//set the height
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      } });​

Answer 2

如果您可以访问HTML，则可以使用另一个<div>包装#one的内容并动态获取其高度。

示例： http ： //jsfiddle.net/88u76/

我还在该示例中展示了一些可以对代码进行链接的链接，因此您不必连续调用$( '#one' ) ，每次都会导致DOM查找。 甚至比将其设置为可以重用的变量更好：

var $one = $( '#one' );

Answer 3

为什么不把文本放在包装器中？ ap或div，并对它执行.slideToggle（）？ 消除所有不必要的计算？

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"> .. </a></p>
        <p class="content" style="display:none">afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
        </p>
    </div>
</div><!-- END.#rightBox -->​

使用Javascript：

$('#t1').click(function() {
          if ($('#one').hasClass("extended")) {
            $('#one p.content').slideToggle();
              //$('#one').stop(true, true).animate({height: '22px'},500);
            $('#one').removeClass("extended");
            $('#a1').stop(true, true).animate({opacity: '1'},500);
          } else {
            //$('#one').animate({height: 'auto'},500);
            $('#one p.content').slideToggle();
              $('#one').addClass("extended");
            $('#a1').animate({opacity: '0'},300);
          }
    });​

http://jsfiddle.net/NxwL8/