本文将介绍如何修改现有的浮动社交分享按钮代码，使其默认状态为关闭，仅在点击触发器后展开。通过简单的HTML属性修改，即可实现按钮的初始隐藏，提升用户体验。
要实现浮动社交分享按钮默认关闭，只需修改HTML结构中menu元素的class属性。原始代码中，menu元素包含了open class，导致页面加载时按钮默认展开。
解决方案：移除open class
将HTML代码中的
menu class=””: 移除了open class，使得页面加载时，CSS样式中menu.open对应的样式不生效，从而隐藏了社交分享按钮。JavaScript代码保持不变：原有的JavaScript代码负责监听触发器的点击事件，并在点击时切换menu元素的open class，实现展开/关闭的切换效果。
完整代码示例：
Floating Social Share Buttons menu { --size: 2.1rem; --radius: 6rem; --padding: .5rem; --bg-color: rgba(255, 255, 255, 0.9); --fg-color: rgba(0, 0, 0, 0.7); --hi-color: #12192c; font-size: 29px; position: fixed; bottom: var(--padding); right: var(--padding); } menu > * { position: absolute; display: grid; place-content: center; border-radius: 50%; font-size: 29px; background: var(--bg-color); color: var(--fg-color); text-decoration: none; box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.6); } menu > .action { --factor: 0; width: 2.5rem; height: 2.5rem; right: calc(1.35 * var(--size)); bottom: calc(1.35 * var(--size)); opacity: 0; transform: rotate(calc(-1 * var(--angle))) translateY(calc(-1 * var(--radius) * var(--factor))) rotate(var(--angle)); transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, box-shadow 250ms ease-in-out, color 250ms ease-in-out; } menu > .action:hover, menu > .trigger:hover { color: var(--hi-color); box-shadow: 0px 0px 0px 0.35rem rgba(0, 0, 0, 0.2); } menu.open > .action { --factor: 1; font-size: 20px; opacity: 1; } menu > .action:nth-child(1) { --angle: 0deg; transition-delay: 0ms; } menu > .action:nth-child(2) { --angle: 30deg; transition-delay: 50ms; } menu > .action:nth-child(3) { --angle: 60deg; transition-delay: 100ms; } menu > .action:nth-child(4) { --angle: 90deg; transition-delay: 150ms; } menu > .trigger { width: calc(1.3 * var(--size)); height: calc(1.3 * var(--size)); bottom: 0; right: 0; font-size: 1.5rem; transition: box-shadow 250ms ease-in-out, color 250ms ease-in-out; } menu > .trigger > i { transition: transform 250ms ease-in-out; } menu.open > .trigger > i { transform: rotate(-360deg); } const trigger = document.querySelector("menu > .trigger"); trigger.addEventListener('click', (e) => { e.currentTarget.parentElement.classList.toggle("open"); });
总结：
通过移除HTML中menu元素的open class，可以轻松实现浮动社交分享按钮的默认关闭状态。这种方法简单有效，无需修改JavaScript或CSS代码，即可达到预期的效果。 确保在修改后，JavaScript代码能够正确地切换open class，以实现按钮的展开和关闭功能。
以上就是如何默认关闭浮动社交分享按钮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586882.html
微信扫一扫 
支付宝扫一扫 
