首页 > 文章 > 前端

关闭浮动社交分享按钮的几种方法

时间：2025-11-09 10:09:40 256浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《默认关闭浮动社交分享按钮的方法通常取决于你使用的平台或网站构建工具。以下是一些常见平台的解决方法：1. WordPress（使用插件）如果你使用的是 WordPress 并通过插件（如：Social Warfare、AddToAny、ShareThis 等）添加了浮动社交分享按钮，可以通过以下步骤关闭：登录 WordPress 后台。进入插件 > 已安装插件。找到你使用的社交分享插件，点击设置或选项。在设置中找到“显示浮动按钮”或“启用浮动分享”的选项，将其关闭。保存更改。如果不想删除插件，也可以在后台禁用插件，或者在主题文件中修改相关代码来隐藏浮动按钮。2. 手动代码控制（适用于自定义网站）如果你是通过 HTML/CSS/JavaScript 自定义添加的浮动社交分享按钮，可以这样操作：方法一：CSS 隐藏在你的 CSS 文件中添加以下代码来隐藏浮动按钮：.float-social-share { display: none; }方法二：JS 控制在 JavaScript 中动态隐藏：document.querySelector('.float-social-share').style.display = 'none';3. 使用浏览器扩展（临时关闭）如果你只是想暂时关闭某个网站》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

如何默认关闭可切换的浮动社交分享按钮

本文旨在解决浮动社交分享按钮默认展开的问题。通过修改HTML结构，移除初始的`open`类，确保分享按钮在页面加载时处于关闭状态，仅在用户点击触发器后展开。同时，详细解释了相关CSS和JavaScript代码，以便读者更好地理解和自定义按钮的行为。

在使用浮动社交分享按钮时，我们常常希望它默认是关闭的，只在用户点击特定按钮后才展开。然而，有时从网络上获取的代码可能存在默认展开的问题。以下是如何解决这个问题的步骤和原理。

问题分析

问题的根源在于HTML结构中，

元素默认带有 open 类。这个类控制了分享按钮的初始状态，导致页面加载时按钮直接展开。

解决方案

要解决这个问题，只需修改HTML代码，移除

元素上的 open 类即可。

具体步骤

修改HTML代码： 找到包含浮动社交分享按钮的HTML代码段。通常，它类似于以下结构：

<menu class="open">
    <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>

将

修改为：

<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>

这样，页面加载时，menu 元素将不再拥有 open 类，从而默认处于关闭状态。

代码解释

为了更好地理解这个解决方案，我们来分析一下相关的CSS和JavaScript代码：

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 类，从而切换按钮的展开和关闭状态。

完整示例

以下是一个完整的示例代码，展示了如何默认关闭浮动社交分享按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'><link rel="stylesheet" href="style.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代码中的 open 类，我们可以轻松地实现浮动社交分享按钮默认关闭的效果。理解相关的CSS和JavaScript代码可以帮助我们更好地自定义按钮的行为，使其更符合我们的需求。记住，在修改代码时，始终要备份原始代码，以便在出现问题时可以快速恢复。

好了，本文到此结束，带大家了解了《关闭浮动社交分享按钮的几种方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！