博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css实现下拉列表
阅读量:4313 次
发布时间:2019-06-06

本文共 509 字,大约阅读时间需要 1 分钟。

  像上面的要想实现 Hover 标题时  内容区下拉的效果,一般是要用js实现:

  获取内容区的高度,由于内容区刚开始可能是隐藏的,那么怎么才能获取其高度呢?方法是先给其元素设置绝对定位并把位置保持和之前的一样,再visibility:hidden;其实jQuery的height()方法就是这么干的,

  再把内容区高度置为0,

  然后利用js让其高度从0 变化到原先获取到的高度,

  平常PC端我们用jQuery习惯了感觉不到麻烦,可移动端实现其效果时你会发现原生js实现起来确实有点麻烦,

  那么我们此时可能会想到既然是移动端,就利用transition变化其高度不就得了,

  于是我们代码这样写:height:0;        》》        height:auto;

  测试后发现根本没有丁点效果,原因是transition要求给目标height一个具体的数值才能触发动画效果,

  ...

  说了一堆废话,最后实现方法是:max-height:0;        》》        max-height:10000px;

转载于:https://www.cnblogs.com/jiujiaoyangkang/p/4891200.html

你可能感兴趣的文章
ASP.NET MVC ajax提交 防止CSRF攻击
查看>>
关于CSS伪类选择器
查看>>
适用于带文字 和图片的垂直居中方法
查看>>
Part 2 - Fundamentals(4-10)
查看>>
使用Postmark测试后端存储性能
查看>>
NSTextView 文字链接的定制化
查看>>
第五天站立会议内容
查看>>
CentOs7安装rabbitmq
查看>>
(转))iOS App上架AppStore 会遇到的坑
查看>>
解决vmware与主机无法连通的问题
查看>>
做好产品
查看>>
项目管理经验
查看>>
笔记:Hadoop权威指南 第8章 MapReduce 的特性
查看>>
JMeter响应数据出现乱码的处理-三种解决方式
查看>>
获取设备实际宽度
查看>>
Notes on <High Performance MySQL> -- Ch3: Schema Optimization and Indexing
查看>>
Kafka的安装和配置
查看>>
Alpha冲刺(10/10)
查看>>
数组Array的API2
查看>>
为什么 Redis 重启后没有正确恢复之前的内存数据
查看>>