display隐藏之后flex布局失效的解决方法

最新推荐文章于 2024-07-17 18:23:49 发布

稍后再看啦

最新推荐文章于 2024-07-17 18:23:49 发布

阅读量911

点赞数 2

分类专栏：小问题+大bug = 前端文章标签： css html javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_64208498/article/details/130162749

版权

小问题+大bug = 前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讨论了在购物页面中遇到的一个问题，即点击事件导致头部栏隐藏后，flex布局失效。解决方案是通过设置display属性为flex来恢复布局。当元素索引大于2时，隐藏头部栏，否则显示头部栏并保持flex布局。通过改变display的值，可以避免flex布局被覆盖或失效的情况。

摘要由CSDN通过智能技术生成

之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面返回的是“flex”

获取的元素.style.display = 'flex'

用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）

    if(e.target.dataset.id > 2){
        document.querySelector('header').style.display='none'
    }
        传统思想需要的tob栏就显示
        //else document.querySelector('header').style.display='block'
        把显示block换成flex即可还原，且不会被隐藏
        else document.querySelector('header').style.display='flex'

稍后再看啦

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
display隐藏之后flex布局失效的解决方法

用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面。获取的元素.style.display = 'flex'返回的是“flex”
复制链接

扫一扫

专栏目录

稍后再看啦 CSDN认证博客专家 CSDN认证企业博客

码龄3年

7: 原创

155万+: 周排名

13万+: 总排名

5842: 访问

: 等级

86: 积分

275: 粉丝

13: 获赞

3: 评论

46: 收藏

私信

关注

热门文章

分类专栏

最新评论

数组对象、数组方法总结
CSDN-Ada助手: 非常感谢您的第四篇博客，题目内容非常实用。恭喜您一直坚持写作，这对于提高技术能力和分享经验都非常有帮助。接下来，希望您可以继续深入探索数组对象和数组方法的细节，分享更多实用的技巧和经验。期待您的下一篇文章！ CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
display隐藏之后flex布局失效的解决方法
CSDN-Ada助手: 恭喜您写出了这篇有价值的博客，对于解决display隐藏导致flex布局失效的问题，提供了很好的解决方法。接下来，建议您可以从实际项目中挑选一些具有代表性的问题，结合自己的经验和思考，撰写更多的有关前端开发的博客，与大家分享您的学习和成长过程。期待您的更多精彩作品！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
数组中的方法map、fliter、find
CSDN-Ada助手: 非常感谢您分享这篇博客，介绍了数组中的几个常用方法，以及如何使用它们来遍历数组。不仅让我更了解了数组的操作方法，也让我对如何更高效地处理数据有了更深的认识。除了map、filter和find之外，您还可以了解一些其他数组方法，例如reduce、some和every，它们也可以帮助您更好地处理数据。希望您能继续分享更多有价值的技术内容。如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
CSDN-Ada助手: 恭喜您开始博客创作，这篇关于移动端购物类页面代码的分享一定会对很多人有所帮助，期待您的更多精彩文章。推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
CSDN-Ada助手: 恭喜您成功写下第一篇博客！分享移动端购物类页面的HTML和LESS代码，对于初学者来说是非常有帮助的。希望您能继续努力，不断提升自己，为更多人提供优质的内容。推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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