Question

我正在尝试更多显示/显示更少的按钮，这会更改<p>块的高度并滑动到正确的大小。

我知道这可以完成，并且只能在两个固定高度之间完成，并且使用auto将停止动画。

我的问题：

如何在动画开始之前获取px块的自动高度的<p>值，以便可以将动画的高度显式设置为此<p>块发生。

到目前为止，我正在使用：

function popupShow(id) {

    var curCss = $('#results').find('a#'+id).parent().find('p').css("height");
    var parent = $('#results').find('a#'+id).parent();

    if(curCss == "136px") {
        parent.find('p').css("height", "auto");
        parent.find('a.show').html("...Show Less");
    }
    else {
        parent.find('p').css("height", "136px");
        parent.find('a.show').html("...Show More");
    }

}

如何修改<p>的大小以包含全文，但我想在一些动画中添加。经过一些谷歌搜索我也改变了这个

function popupShow(id) {
    var curCss = $('#results').find('a#'+id).parent().find('p').css("max-height");
    var parent = $('#results').find('a#'+id).parent();

    if(curCss == "136px") {
        parent.find('p').css("max-height", "500px");
        parent.find('a.show').html("...Show Less");
    }
    else {
        parent.find('p').css("max-height", "136px");
        parent.find('a.show').html("...Show More");
    }
}

但是我注意到有些博客帖子可能比500px更大，所以我将其设置为5000px，因为它说比你实际需要的更大然后动画看起来很蠢。

对于我正在使用的css动画：

-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;

1篇博文的html布局（忽略php）：

<div class="post-hold">
    <div class="p-head">
        <div class="p-title">
            ' . $posts[$i]['title'] . '
        </div>
    </div>
    <div class="p-body">
        <p>' . $posts[$i]['description'] . '</p>
        <a id="' . $posts[$i]['id'] . '" class="show" onClick="popupShow(this.id)">...show more</a>
        <div style="display: block; clear: both;"></div>
    </div>
    <div class="p-foot">
        <div class="info">
            <span class="p-time">' . \Core\View::time_since($posts[$i]['timeStamp']) . '</span>
            <span class="p-user">' . $posts[$i]['user'] . '</span>
        </div>
        <div style="display: block; clear: both;"></div>
    </div>
</div>

提前致谢。

修改

JSFiddle代表136px - ＆gt; 500px示例。

Answer 1

你可以使用行高（不需要知道高度）：

＆＃13;

p {
  margin:0;
  overflow:hidden;
  line-height:0em;
  transition:0.25s
}
a:hover + p , 
p:hover /* don't loose p once you want to hover it/select text or click an inside link */
{
  line-height:1.2em;
}

＆＃13;

<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<a href="#">link</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

＆＃13;

Answer 2

你可以在JS中隐藏段落，获取高度并再次显示。

JS：

var p = $('p');
var pMaxHeight = $('p').css('max-height');

$(window).resize(function() {
  p.css({
    position: "absolute",
    visibility: "hidden",
    display: "block",
    maxHeight: 'none'
  });
  pHeight = p.height();
  p.css({
    position: "",
    visibility: "",
    display: "",
    maxHeight: '150px'
  });
});

$(window).trigger('resize');

$('button').click(function() {
  pMaxHeight = $('p').css('max-height');
  if (pMaxHeight == '150px') {
    p.css('max-height', pHeight);
  } else {
    p.css('max-height', '150px');
  }
});

CODEPEN

Answer 3

严格地说，如果需要获取元素的高度或宽度，请使用.offsetWidth和.offsetHeight属性。

请注意.offsetWidth和.offsetHeight属性属于不是.style的元素。

示例：

var width = document.getElementById（'foo'）。offsetHeight;

Answer 4

Show more show less with JQuery

这应该通过单击实际div来切换完整div的显示，您可以将click事件添加到您想要的任何触发器。

HTML：

<p id="blah">
    Long...Content
</p>

使用Javascript：

$('#blah').css({height:'20px', overflow:'hidden'});
$('#blah').on('click', function() {
    var $this = $(this);
    if ($this.data('open')) {
        $this.animate({height:'20px'});
        $this.data('open', 0);

    }
    else {
        $this.animate({height:'100%'});
        $this.data('open', 1);
    }
});

最初使用javascript显示较少不会无限期地为没有启用javascript的用户隐藏div。

将<p>块的高度更改为等于auto的固定高度

4 个答案:

CODEPEN