jquery 简单“展开收起”效果

经常会碰到文本详情展开和收起,需要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")

}

})

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,876评论 0 1
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 4,057评论 0 9
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 3,349评论 0 1
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 5,099评论 0 0
  • shell编程shell主要用来简化管理操作bash变量1.什么是变量变量是计算机内存的单元,其中存放的值可以改变...
    小线亮亮阅读 4,829评论 0 1