如何默认关闭浮动社交分享按钮_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何默认关闭浮动社交分享按钮

2025-10-21

浏览次数：次

返回列表

如何默认关闭浮动社交分享按钮

本文将介绍如何修改现有的浮动社交分享按钮代码，使其默认状态为关闭，仅在点击触发器后展开。通过简单的HTML属性修改，即可实现按钮的初始隐藏，提升用户体验。

要实现浮动社交分享按钮默认关闭，只需修改HTML结构中menu元素的class属性。原始代码中，menu元素包含了open class，导致页面加载时按钮默认展开。

解决方案：移除open class

将HTML代码中的

修改为或即可。

修改后的HTML代码片段：

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

<body>
  <menu class="">
    <a href="#" class="action"><i class="fab fa-dribbble"></i></a>
    <a href="#" class="action"><i class="fab fa-instagram"></i></a>
    <a href="#" class="action"><i class="fab fa-twitter"></i></a>
    <a href="#" class="action"><i class="fab fa-facebook-f"></i></a>
    <a href="#" class="trigger"><i class="fas fa-share"></i></a>
  </menu>
  <script  src="script.js"></script>
</body>

代码解释：

menu class="": 移除了open class，使得页面加载时，CSS样式中menu.open对应的样式不生效，从而隐藏了社交分享按钮。
J*aScript代码保持不变：原有的J*aScript代码负责监听触发器的点击事件，并在点击时切换menu元素的open class，实现展开/关闭的切换效果。

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Floating Social Share Buttons</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
  <style>
    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);
    }
  </style>
</head>
<body>
  <menu class="">
    <a href="#" class="action"><i class="fab fa-dribbble"></i></a>
    <a href="#" class="action"><i class="fab fa-instagram"></i></a>
    <a href="#" class="action"><i class="fab fa-twitter"></i></a>
    <a href="#" class="action"><i class="fab fa-facebook-f"></i></a>
    <a href="#" class="trigger"><i class="fas fa-share"></i></a>
  </menu>
  <script>
    const trigger = document.querySelector("menu > .trigger");
    trigger.addEventListener('click', (e) => {
      e.currentTarget.parentElement.classList.toggle("open");
    });
  </script>
</body>
</html>

总结：

通过移除HTML中menu元素的open class，可以轻松实现浮动社交分享按钮的默认关闭状态。这种方法简单有效，无需修改J*aScript或CSS代码，即可达到预期的效果。确保在修改后，J*aScript代码能够正确地切换open class，以实现按钮的展开和关闭功能。

以上就是如何默认关闭浮动社交分享按钮的详细内容，更多请关注其它相关文章！

# 只需 # 食用油网络营销推广方案 # 花心电影网站建设 # 装饰网站建设与制作公司 # seo人员职责 # 越秀网站建设网站优化小程序开发 # 井陉营销关键词排名介绍 # 泰安网站建设素材推荐 # 封丘网站关键词排名优化 # 产品推广网站 # 西安正规网站优化seo费用 # 使其 # 中文网 # 相关文章 # 并在 # css # 加载 # 显示效果 # 单选框 # 移除 # 表单 # cdn # ssl # facebook # instagram # ajax # js # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：CSS Flexbox实现图片等宽与单行布局指南

下一篇：HTML5怎么设置段落行距_HTML5行高line-height设置

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

如何默认关闭浮动社交分享按钮