1

我已经构建了一个简单的动画功能，您可以在其中单击扩展框，如果可能的话，我宁愿不使用插件。

目前它看起来像这样：

$('#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 -->
4

3 回答 3

3

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

看到这个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);
      } });​
于 2012-10-26T14:15:34.693 回答
1

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

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

我还在那个例子中展示了一些你可以用你的代码做的链接，这样你就不必连续调用$( '#one' )每次都会导致 DOM 查找。比这更好的方法是将它设置为一个你可以重用的变量：

var $one = $( '#one' );
于 2012-10-26T14:20:52.227 回答
0

为什么不把文本放在一个包装器中？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/

于 2012-10-26T14:28:33.270 回答