【CSS】最快实现元素显隐切换的方法

已于 2023-10-27 15:18:27 修改
阅读量118 收藏 1
点赞数
文章标签： css 前端 html
于 2023-10-27 15:18:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42632112/article/details/134076958
版权

如果直接用display:none和display:block切换，切换回block时div中元素原本的样式会改变，这是因为相当于新加了一个div，内部元素的排列样式会清空

正确做法是：

  1. 父盒子高度设为要保留的部分的高度，overflow:hidden
  2. 要隐藏的元素高度设为0，overflow:hidden
xxbunny
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）
qq_55006020的博客
06-28 2431
前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
js修改display，在none和block之间切换不显示问题
渔火江渚上的博客
05-21 1万+
目的：这是我的目的，要实现的效果 点击回复a链接 ，输入框input所在父元素div，显示或隐藏。 input>div>div（这个最外层div，对应着问题一，和问题二无关） 问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div 问题二：dislay属性值...
display: none 和display: block之间的切换出现过渡效果失效
jsPao的博客
04-06 2056
原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。 解决方法：用opacity（透明度）去替代。
解决display:none到display:block无法实现过渡效果的问题(转换解决思路)
weixin_41033048的博客
12-23 7960
主要是解决问题的思路要转换一下 一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。 所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。 <div class="hover-on"> <div class=".
关于display:none和display:block的问题
不积跬步，无以至千里
08-21 2万+
如果使用了display:none，会使该标签消失；可以通过display:block重新恢复该标签。但是这里有一个问题，使用了display：none之后会使该标签原本的样式被清除，所以就算重新恢复标签也不会恢复原本的样式。 解决办法： 不要直接令某一个标签的display属性设置为none，应当用一个div标签将要消失的标签包起来，然后通过该div标签的display来实现内部标签的隐藏和
SuperMap iMobile for iOS 图层显隐切换
12-15
创建用户友好的界面元素，如按钮或开关，供用户触发图层的显隐切换。在用户点击这些控件时，调用上述的图层状态管理逻辑。 6. **更新地图视图**： 修改图层的显示状态后，记得刷新地图视图（`[mapView refresh]`...
菜单显隐切换终极版
05-21
总结起来，"菜单显隐切换终极版"涵盖了前端开发中的HTML结构设计、CSS样式编写、JavaScript交互实现、响应式布局、动画效果、模块化开发、兼容性处理以及性能优化等多个方面。这些都是现代Web开发的基础技能，也是...
Vue实现点击后文字变色切换方法
01-21
然后用click事件控制它们的显隐。 代码如下： HTML： !showCommentInput click=showCommentInput>回复 <span class=response v-show=showCommentInput @click=showCommentInput = !showComm
css 元素显示隐藏的9种思路
12-28
对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等 注意：如果要适用于任何元素需要提前储存元素...
利用css transition属性实现一个带动画显隐的微信小程序部件
03-29
我们先来看效果图   (此图片来源于网络，如有侵权，请联系删除! )   像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性...
Vue | 显示切换（v-if与v-show,display,visibility与opacity）
MGsniper的博客
01-16 3万+
在Vue中，实现显示切换，有以下几种手段： 1. 使用v-if指令 2. 使用v-show指令 3. 动态绑定display 4. 动态绑定visibility 5. 动态绑定opacity
用纯css实现下拉菜单的几种方式
Javaxiaobaismc的博客
04-08 1278
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ ...
css实现 display: none和display: block的切换动画
热门推荐
李二狗的博客
10-19 4万+
话不多说先上代码.index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ececec; } .index-detail-list .item-contain.active{ display: bl
关于display：none的恢复问题 或取消display：none属性
liangshiyun1的博客
07-23 1万+
关于display：none的恢复问题 或取消display：none属性；通过display属性来设置元素的不显示及其恢复。
前端实用功能：选项卡切换
m0_38102273的博客
07-18 1789
这个功能主要还是由display:block  与  display:none之间通过点击选项卡切换完成的 html代码 &lt;div&gt;      &lt;ul id="hear"&gt;&lt;!--选项卡列表，如果是底部选项卡，将hear fixed到底部，侧边栏重新设置css--&gt;           &lt;li class="action" style="color...
点击按钮切换
llthh的博客
12-09 921
先来演示一下效果 首先在页面布局方面 第一个板块我们给他设置display:block属性值，使它展现出来 第二个板块我们给他设置display:none属性值，让他隐藏掉 下面就是按钮的切换功能，我们主要是利用display的属性值来进行改写 给这两个按钮一个div: 尺码管理 尺码组管理 第一个和第二个板块分别是Dm1，Dm2; 给他们声明一个变量： var Dm1 = $(".Dm1"); var Dm2 = $(".Dm2"); 利用display属性值对他进行改变:
jquery设置display属性_jQuery 切换效果方法
weixin_39625782的博客
01-28 1644
好好学习，天天向上本章主要内容是：显示和隐藏方法 hide() 和 show() 方法、滑动显示隐藏 slideDown() 和 slideUp() 方法、淡入淡出 fadeIn() 和 fadeOut() 方法一、显示和隐藏方法 hide() 和 show() 方法hide()：元素隐藏，隐藏的前提必须是元素 display:block；show()：元素显示，显示的前提必须是元素 displa...
jquery切换display
滕青山博客
01-22 472
$("#id").toggle()切换元素的可见状态。 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
animation.css将盒子显隐
最新发布
06-10
是的，animation.css可以使用动画效果来实现盒子的显隐。可以通过设置opacity属性实现盒子的淡入淡出效果，也可以通过设置transform属性实现盒子的平移、旋转、缩放等动画效果。同时，animation.css还提供了许多预定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值