您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

CSS 实现超过固定高度后出现展开折叠按钮

时间:2023-02-20 16:06:33  来源:51CTO  作者:XboxYan
css现在已经有相关方法可以判断高度了,那就是CSS容器查询。不过这个特性太高级了,目前几乎还不能实战,我们这次介绍一种更加传统的方式。

 

 

在平时开发中,经常会碰到一些需要判断高度的场景,比如当超过一定高度后,需要自动出现展开折叠按钮,如下:

 

图片

 

传统的思路肯定是通过JS去动态计算容器的高度,但这样就涉及到加载时机的问题,获取早了可能元素还没渲染好,晚了又会有明显的卡顿感,或者会引起页面的闪烁。

那有没有仅通过CSS的方法呢?

当然也是有的!要实现上面这个例子的效果,需要解决以下几个问题:

  1. 如何判断不同的高度?
  2. 如何在不同的高度下展示隐藏点击按钮?
  3. 如何点击切换?

花几分钟一起看看吧



Tags:CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
CSS现在已经有相关方法可以判断高度了,那就是CSS容器查询。不过这个特性太高级了,目前几乎还不能实战,我们这次介绍一种更加传统的方式。 在平时开发中,经常会碰到一些需要判断...【详细内容】
2023-02-20  Tags: CSS  点击:(0)  评论:(0)  加入收藏
通常是借助 JS 动态去获取元素的高度(还有些麻烦的,需要渲染后才能知道高度)。其实CSS 也有一个巧用max-height适配动态高度的解决方案。 众所周知,高度在设置成auto​关键词时...【详细内容】
2023-02-06  Tags: CSS  点击:(15)  评论:(0)  加入收藏
作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作...【详细内容】
2023-01-06  Tags: CSS  点击:(23)  评论:(0)  加入收藏
效果: 所有代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"...【详细内容】
2022-12-11  Tags: CSS  点击:(39)  评论:(0)  加入收藏
在发生重大哀悼事件时候,需要紧急将网站变灰以示哀悼,在此虫虫给大家总结了几种方法,通过简单修改一下站点样式即可实现。 修改源码另外主要方便快捷的方法是使用CSS样式的gray...【详细内容】
2022-12-01  Tags: CSS  点击:(14)  评论:(0)  加入收藏
运行效果效果图技术要点 图片和文字的对齐方式,vertical-align: bottom 底部对齐,vertical-align: middle 居中对齐 浮动 float: left,子元素一浮动,需要全部浮动,浮动后不占有位...【详细内容】
2022-11-14  Tags: CSS  点击:(65)  评论:(0)  加入收藏
这篇文章将深入的挖掘我当时为什么会在项目中使用 CSS-in-JS (本文使用 Emotion 方案 ),而现在为什么正在放弃这样的方案。什么是 CSS-in-JSCSS-in-JS 允许你直接使用 JavaScri...【详细内容】
2022-10-27  Tags: CSS  点击:(75)  评论:(0)  加入收藏
自定义属性 自定义属性(也称为CSS变量)的使用量大增,2021年和2022年之间的增长也不例外。43%的页面,包括桌面和移动端,都在使用自定义属性,并且至少有一个var()函数。 正如去年...【详细内容】
2022-10-24  Tags: CSS  点击:(73)  评论:(0)  加入收藏
在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程...【详细内容】
2022-10-20  Tags: CSS  点击:(40)  评论:(0)  加入收藏
(原图样式)今天我们讲一下几个文本标签<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加讲一下<code>first-line</code>和<code>firs...【详细内容】
2022-10-14  Tags: CSS  点击:(141)  评论:(0)  加入收藏
▌简易百科推荐
CSS现在已经有相关方法可以判断高度了,那就是CSS容器查询。不过这个特性太高级了,目前几乎还不能实战,我们这次介绍一种更加传统的方式。 在平时开发中,经常会碰到一些需要判断...【详细内容】
2023-02-20  XboxYan  51CTO  Tags:CSS   点击:(0)  评论:(0)  加入收藏
通常是借助 JS 动态去获取元素的高度(还有些麻烦的,需要渲染后才能知道高度)。其实CSS 也有一个巧用max-height适配动态高度的解决方案。 众所周知,高度在设置成auto​关键词时...【详细内容】
2023-02-06  XboxYan  51CTO  Tags:CSS   点击:(15)  评论:(0)  加入收藏
对于网页换肤,例如最常见的深色、浅色风格已经是很常见的一个需求了。一直以来也有很多的实现方案,这里我主要介绍一下基于 CSS variable的实现方式简单列举下一些其它实现...【详细内容】
2023-02-04  程序媛最幽默  今日头条  Tags:网页   点击:(16)  评论:(0)  加入收藏
效果: 所有代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"...【详细内容】
2022-12-11  一个爬坑的Coder  今日头条  Tags:CSS   点击:(39)  评论:(0)  加入收藏
在发生重大哀悼事件时候,需要紧急将网站变灰以示哀悼,在此虫虫给大家总结了几种方法,通过简单修改一下站点样式即可实现。 修改源码另外主要方便快捷的方法是使用CSS样式的gray...【详细内容】
2022-12-01  虫虫安全    Tags:css   点击:(14)  评论:(0)  加入收藏
运行效果效果图技术要点 图片和文字的对齐方式,vertical-align: bottom 底部对齐,vertical-align: middle 居中对齐 浮动 float: left,子元素一浮动,需要全部浮动,浮动后不占有位...【详细内容】
2022-11-14  程序员COW哥  今日头条  Tags:CSS   点击:(65)  评论:(0)  加入收藏
这篇文章将深入的挖掘我当时为什么会在项目中使用 CSS-in-JS (本文使用 Emotion 方案 ),而现在为什么正在放弃这样的方案。什么是 CSS-in-JSCSS-in-JS 允许你直接使用 JavaScri...【详细内容】
2022-10-27  程序猿最幽默  今日头条  Tags:CSS   点击:(75)  评论:(0)  加入收藏
自定义属性 自定义属性(也称为CSS变量)的使用量大增,2021年和2022年之间的增长也不例外。43%的页面,包括桌面和移动端,都在使用自定义属性,并且至少有一个var()函数。 正如去年...【详细内容】
2022-10-24  前端小智  今日头条  Tags: CSS   点击:(73)  评论:(0)  加入收藏
在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程...【详细内容】
2022-10-20  浪知潮华翔  今日头条  Tags:CSS   点击:(40)  评论:(0)  加入收藏
(原图样式)今天我们讲一下几个文本标签<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加讲一下<code>first-line</code>和<code>firs...【详细内容】
2022-10-14  京玉仕家  今日头条  Tags:Css   点击:(141)  评论:(0)  加入收藏
站内最新
站内热门
站内头条