投稿获客
  1. 创想鸟首页
  2. web前端

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

程序猿 • • web前端 • 阅读 0

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

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

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

问题分析

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

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

解决方案

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

元素上的 open 类即可。

具体步骤

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

将

修改为

：

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

代码解释

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

Swapface人脸交换 Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

Swapface人脸交换 45 查看详情 Swapface人脸交换

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/605781.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

287.7K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年11月10日 22:37:18
下一篇 2025年11月10日 22:38:30

相关推荐

  • PHP函数代码风格的在线资源 好文分享

    PHP函数代码风格的在线资源

    PHP 函数代码风格的在线资源 保持一致的代码风格对于代码可读性和可维护性至关重要。对于 PHP，有一些在线资源可以帮助您遵守最佳实践。 PHP_CodeSniffer PHP_CodeSniffer 是一款静态分析工具，可根据一组预定义的规则检查 PHP 代码。它可以检测编码标准违规并建议修复。您…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • php函数代码部署的成本优化策略 好文分享

    php函数代码部署的成本优化策略

    为了降低 php 函数代码部署成本，可以采取以下策略：利用容器化部署，简化可扩展性和可移植性，减少重复性任务的开销。采用无服务器计算，只为实际使用的资源付费，让成本与流量模式保持一致。使用代码压缩和优化技术，减小 php 代码包的大小，降低部署时间和资源消耗。通过 cdn 将静态文件缓存到离用户较近…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • PHP 函数命名规范解读：特殊字符的使用指南 好文分享

    PHP 函数命名规范解读：特殊字符的使用指南

    php 函数命名中的特殊字符：允许使用下划线（_）、连字符（-）、点（.）来分隔单词和复合词。下划线通常用于分隔单词，提高可读性。连字符用于分隔复合词，类似于下划线，但更常用于 css 或 html 样式名称。点用于分隔方法的类名和方法名称。使用时应避免不必要字符，注意字符的顺序和连贯性，以确保函数…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • PHP 函数命名规范解读：面向对象命名惯例 好文分享

    PHP 函数命名规范解读：面向对象命名惯例

    php oop 函数命名规范要求：私有函数以下划线开头。公共方法以小写字母开头。类方法后缀与方法类型匹配（getter：_get、setter：_set、其他：_do）。静态方法以小写字母和下划线开头，后跟方法名称。函数名称应描述功能，明确参数和返回值，避免缩写和混淆术语。 PHP 函数命名规范解读…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 自定义函数封装对象和方法 好文分享

    自定义函数封装对象和方法

    自定义函数封装对象和方法 简介自定义函数是一种将代码组织成可重用组件的强大技术，可以提高代码的可读性和可维护性。封装是面向对象编程的一项基本原则，它涉及到将数据及其相关方法捆绑成单一对象。 实战案例让我们从一个简单的学生对象开始，该对象包含有关学生姓名、学号和成绩的信息： class Student…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • php函数与前端交互时的难题及解决方案 好文分享

    php函数与前端交互时的难题及解决方案

    在 php 函数与前端交互时，常见的难题及解决方案如下：在前端访问 php 变量：输出到 html 中，例如 echo 从前端传递数据：通过 html 表单或 ajax 请求提交数据。处理客户端事件：使用 javascript 监听事件并通过 ajax 发送数据。跨域请求：配置 cors 允许不同域…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • php函数跨语言调用实战指导 好文分享

    php函数跨语言调用实战指导

    #%#$#%@%@%$#%$#%#%#$%@_e1bfd762321e409c++ee4ac0b6e841963c 可通过外部函数接口（ffi）实现与其他语言的跨语言调用。实战案例：安装 ffi 扩展定义 c++ 函数签名加载 c++ 函数库使用 ffi 库调用 c++ 函数，实现从 php 调用其…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 充分利用 PHP 函数的内置特性 好文分享

    充分利用 PHP 函数的内置特性

    充分利用 php 的内置函数，可显著简化代码：数组处理函数：array_filter() 过滤元素、array_map() 应用回调函数、array_reduce() 归约数组、array_diff() 计算差集、array_combine() 组合数组。字符串处理函数：strlen() 获取长度、…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 什么是 PHP CodeSniffer？ 好文分享

    什么是 PHP CodeSniffer？

    PHP CodeSniffer 是一种流行的工具，用于检测 PHP 代码中违反编码标准的情况。它通过分析 PHP、JavaScript 和 CSS 文件以遵守定义的编码标准，帮助保持代码库的一致性和质量。 PHP CodeSniffer 的主要特性 编码标准执行： CodeSniffer 根据预定义…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 精简 PHP 函数参数，提升调用性能 好文分享

    精简 PHP 函数参数，提升调用性能

    精简 php 函数参数可提升调用性能：1. 合并重复参数；2. 传递可选参数；3. 使用默认值；4. 使用解构赋值。优化后，在商品销售网站的 calculate_shipping_cost 函数案例中，将默认值分配给 is_free_shipping 参数显著提升了性能，降低了执行时间。 精简 PH…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 提高 PHP 效率：经过验证的性能优化技术 好文分享

    提高 PHP 效率：经过验证的性能优化技术

    优化 php 性能可确保我们的 web 应用程序平稳运行、快速响应并高效处理流量。下面是关于如何有效地最大化 php 性能的详细分步指南，并为每种优化策略提供了实践示例。 第 1 部分：更新到最新的稳定 php 版本 第 1 步：检查当前 php 版本 首先检查系统上安装的当前 php 版本： ph…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 使用linter工具实现PHP函数参数类型检查 好文分享

    使用linter工具实现PHP函数参数类型检查

    通过使用linter工具phpstan，我们可以实现php函数参数的类型检查。phpstan是一种静态分析工具，可通过分析变量类型的推断来检查函数参数类型。我们可以使用composer安装phpstan并通过配置phpstan.neon文件来设置检查级别。phpstan通过类型断言和严格类型检查来检…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 如何在纯 PHP 项目中使用 Tailwind CSS 好文分享

    如何在纯 PHP 项目中使用 Tailwind CSS

    （图片来源） 要开始在纯 php 项目中使用 tailwind css，您可以在项目中安装 tailwind css。方法如下： 在终端中运行 npm init -y。 安装 tailwind 依赖项： npm install tailwindcss postcss autoprefixer 立即学…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 遵循 PHP 函数命名约定可获得的社区支持 好文分享

    遵循 PHP 函数命名约定可获得的社区支持

    遵循 php 函数命名约定可获得以下社区支持：提高代码可读性，使代码易于阅读和理解。简化维护，使代码易于维护和更新。更好的社区支持，在在线论坛中更容易获得帮助。 遵循 PHP 函数命名约定可获得的社区支持 PHP 函数命名约定是一种行业规范，旨在确保代码一致且易于维护。遵循这些约定可以提高代码可读性…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • PHP函数中参数类型检查与其他语言的比较 好文分享

    PHP函数中参数类型检查与其他语言的比较

    php函数的参数类型检查通过强制转换和类型声明进行，与其他语言相比，它提供了更高的灵活性，如java和c#的强制类型安全，python和javascript的可选类型检查，使php能够在确保类型安全性和代码灵活性之间取得平衡。 PHP 函数中参数类型检查与其他语言的比较 PHP 中的参数类型检查可以…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 函数中返回异常时如何捕捉和处理异常？ 好文分享

    函数中返回异常时如何捕捉和处理异常？

    函数中返回异常时如何捕捉和处理异常 简介： 函数在返回异常时，调用方无法直接获取异常信息，如果不进行处理，将导致程序崩溃。因此，捕捉和处理函数中返回的异常非常重要。 方法： Python提供了多种机制来捕捉和处理函数中返回的异常： try-except 块： try: # 调用可能引发异常的函数ex…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 优化 CodeIgniter 中的性能：技巧和最佳实践 好文分享

    优化 CodeIgniter 中的性能：技巧和最佳实践

    CodeIgniter 以其简单性和速度而闻名，但随着应用程序的增长，保持最佳性能变得至关重要。为了帮助您充分利用 CodeIgniter 设置，我们整理了基本技巧和最佳实践，以确保您的应用程序顺利运行。 1。明智地利用缓存缓存可以通过减少服务器上的负载来显着提高性能。 CodeIgniter 提供…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 婴儿学步学习 Laravel 好文分享

    婴儿学步学习 Laravel

    欢迎回来，开发者！ ✨ 在 laravel 之旅的这一章中（请记住，我在撰写这些文章时正在学习，因此这将是您能找到的最现实的教程系列之一！），我们将深入研究我们的 laravel 项目。我们将探索项目结构，熟悉迁移，并以最简单的方式分解 mvc 架构。 ?今天的议程： 探索我们的项目结构 ?️ 了解…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 将 Vuejs 添加到 TALL Stack 项目的好处 好文分享

    将 Vuejs 添加到 TALL Stack 项目的好处

    将 Vue.js 添加到 TALL Stack 项目的好处 TALL 堆栈由 Tailwind CSS、Alpine.js、Laravel 和 Livewire 组成，是用于构建现代动态 Web 应用程序的强大工具包。这种组合在开发人员中特别受欢迎，他们欣赏它提供的简化的开发流程，允许以最少的努力创…

    程序猿的头像 程序猿
    2025年12月9日
    000
  • 如何用 PHP 调用 Java 函数？ 好文分享

    如何用 PHP 调用 Java 函数？

    使用 java bridge 类库可从 php 脚本中调用 java 函数，通过以下步骤实现：使用 composer 安装 java bridge 类库。使用 setjavaclasspath() 方法配置 php 代码和 java 类路径之间的链接。使用 javaclass::callstatic…

    程序猿的头像 程序猿
    2025年12月9日
    000

发表回复

登录后才能评论
关注微信