美文网首页
jquery 简单“展开收起”效果

jquery 简单“展开收起”效果

作者: Erin_梦 | 来源:发表于2016-07-22 16:04 被阅读564次

经常会碰到文本详情展开和收起,需要overflow:hidden;配合height:auto;来使用

通常容器规定了宽高,超过部分用overflow:hidden;隐藏,当添加height:auto的时候height值和overflow失效

具体例子如下:

html

<p class=“heigthAuto”>如果给定一个表示 DOM 元素集合的 jQuery 对</p>

<a>展开</a>

css

p{width:200px;height:54px;overflow:hidden}

.heightAuto{height:auto}

js

$(function () {

$("a").on('click', function () {

if ($(this).prev().hasClass("heightAuto")) {

$(this).text("收起");

$(this).prev().removeClass("heightAuto")

} else {

$(this).text("展开");

$(this).prev().addClass("heightAuto")

}

})

})

相关文章

网友评论

      本文标题:jquery 简单“展开收起”效果

      本文链接:https://www.haomeiwen.com/subject/azmbjttx.html