本文旨在解决浮动社交分享按钮默认展开的问题。通过修改HTML结构，移除初始的`open`类，确保分享按钮在页面加载时处于关闭状态，仅在用户点击触发器后展开。同时，详细解释了相关CSS和JavaScript代码，以便读者更好地理解和自定义按钮的行为。
在使用浮动社交分享按钮时，我们常常希望它默认是关闭的，只在用户点击特定按钮后才展开。然而，有时从网络上获取的代码可能存在默认展开的问题。以下是如何解决这个问题的步骤和原理。
问题分析
问题的根源在于HTML结构中，
CSS:
CSS代码控制了按钮的显示和动画效果。关键部分是 menu.open > .action 选择器，它定义了当 menu 元素具有 open 类时，.action 元素的样式。
menu.open > .action { --factor: 1; font-size: 20px; opacity: 1;}
这段代码使 .action 元素可见并展开。通过移除 menu 元素的 open 类，我们阻止了这段CSS代码的生效，从而使按钮默认关闭。
JavaScript:
JavaScript代码负责处理点击事件，切换 menu 元素的 open 类。
const trigger = document.querySelector("menu > .trigger");trigger.addEventListener('click', (e) => { e.currentTarget.parentElement.classList.toggle("open");});
这段代码首先找到 menu 元素内的 .trigger 元素，然后添加一个点击事件监听器。当用户点击 .trigger 元素时，classList.toggle(“open”) 方法会在 menu 元素上添加或移除 open 类，从而切换按钮的展开和关闭状态。
完整示例
以下是一个完整的示例代码，展示了如何默认关闭浮动社交分享按钮：
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代码中的 open 类，我们可以轻松地实现浮动社交分享按钮默认关闭的效果。理解相关的CSS和JavaScript代码可以帮助我们更好地自定义按钮的行为，使其更符合我们的需求。记住，在修改代码时，始终要备份原始代码，以便在出现问题时可以快速恢复。
以上就是如何默认关闭可切换的浮动社交分享按钮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586874.html
微信扫一扫 
支付宝扫一扫 
