Chrome 84“破坏”手风琴和“阅读更多”按钮

是指在Chrome浏览器版本84中，出现了一个Bug导致手风琴和“阅读更多”按钮的功能受到破坏。

手风琴是一种常用的网页设计元素，用于在有限的空间内展示大量内容。它通常以垂直折叠的方式呈现，用户可以点击标题或者图标来展开或折叠内容。而“阅读更多”按钮则是一种常见的网页设计元素，用于在内容过长时，提供一个点击按钮来展开剩余内容。

Chrome 84版本中的Bug导致手风琴和“阅读更多”按钮的展开和折叠功能无法正常工作。具体表现为点击手风琴标题或者“阅读更多”按钮后，无法展开或折叠内容，导致用户无法查看或隐藏相关信息。

这个Bug可能会影响使用Chrome 84版本的用户，特别是那些经常浏览使用手风琴或“阅读更多”按钮的网页的用户。对于网页开发者来说，他们需要注意这个Bug可能会影响到他们网站上相关功能的正常使用。

为了解决这个问题，用户可以考虑以下几种方法：

更新Chrome浏览器：Google通常会及时发布修复Bug的更新版本，用户可以通过更新Chrome浏览器来解决这个问题。
临时使用其他浏览器：如果Bug对用户的使用造成了较大影响，用户可以暂时切换到其他浏览器来浏览相关网页，直到Chrome发布修复版本。
与网页开发者联系：如果用户发现某个网页上的手风琴或“阅读更多”按钮无法正常工作，可以联系网页开发者并向其报告这个Bug，以便他们能够及时修复。

需要注意的是，以上方法仅适用于解决Chrome 84版本中手风琴和“阅读更多”按钮功能受损的问题。对于其他版本的Chrome浏览器或其他浏览器的类似问题，可能需要采取不同的解决方法。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎TKE：https://cloud.tencent.com/product/tke
云存储COS：https://cloud.tencent.com/product/cos
人工智能平台AI Lab：https://cloud.tencent.com/product/ai
物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
移动开发平台MPS：https://cloud.tencent.com/product/mps
区块链服务BCS：https://cloud.tencent.com/product/bcs
元宇宙服务：https://cloud.tencent.com/product/metaspace

相关·内容

【译】W3C WAI-ARIA最佳实践 -- 控件

4.5K3 0

给单元素艺术添加动画

在继续阅读本文之前，可以先看看 Lynn Fisher 的这篇文章她为什么以及如何制作单元素艺术。很少使用单个 div 元素做动画。...目前，只有 Chrome 和 Opera 支持。如果跨浏览器支持的话，这是改变状态最快的方法。...如果你正在使用 Chrome 和 Opera 浏览，可以使用此方法给手风琴的左侧按键及右侧按钮添加动画。...手风琴右侧按钮部分用的就是这一方法 (如果关键帧方法不被支持的话可以用这个方法替换)....在手风琴的例子中， --button4-color 或者 --button4-dim 在 CSS 中没有明确定义。所以当加载时它们会使用 --color1 和 --button-dim 的默认值。

1.4K5 0

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function...4、自动修复破坏的图像逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你： $('img').on('error', function () { if(!...6、禁用输入字段有时候，你可能想要禁用表格的提交按钮或它的某一项文字输入直到用户执行了特定操作（例如，勾选“我已阅读相关条款”复选框）。...('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); }); 9、简单的手风琴...jQuery中可以让代码变得更短和更快的代最佳做法。

3.9K6 0

高颜值在线绘图平台ImageGP系列教程 - 参数介绍

第一部分是轮播图，展现每个工具能产生的代表性图、示例数据和参数；给定符合格式的数据、设置指定的参数，即可获得右侧的可视化结果。第二部分是引用信息。...第三部分是 Demo 按钮。通常 Demo 按钮的数目和顺序是跟轮播图一致的，点击 Demo 按钮后，会填入相应的数据、选择相应的参数，直接点击提交就可以获得可视化结果。...第五部分是更多参数如 Cluster parameters, Data preprocess, Layout等。...每个手风琴里面有更多参数可以设置，如果该手风琴里面有必选参数，通常是打开的；如果没有必选参数，默认是收起的。...宽矩阵是否第一列有无重复值、除了第一行和第一列其它元素是否都为数字。检测不通过的都会给出提示，请仔细阅读提示信息，改正数据后再提交。

1.2K4 0

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

为了让大家更好理解本案例，我将和大家一起一步步的完成。 手风琴样式效果：下图是我们要制作的手风琴效果动态图： ? 本示例需要你具备一些关于 flexbox 弹性盒子布局的相关知识。...1、创建 HTML 基本结构在本练习中，我们从维基百科中找一些四种不同类型的内容介绍：动物、植物、空间和河流。然后我们创建相应的单选表单按钮，并为其分配 Value 相关的内容关键词： ?...接下来我们来定义手风琴整体外观样式布局，让其具有响应式，用到了弹性盒子布局，设置 display:flex, 同时又应用到了CSS的自定义变量的新属性，方便我们进行统一设置和修改，示例代码如下： ?...最终完成的代码最终完成的效果，大家可以点击阅读原文进行查看，具体的代码如下 1、HTML代码部分： <input type="radio" id="animal" name="wiki" value...通过本文，我们一起学习了如何使用 CSS checkbox hack 技术纯手工撸一个手风琴组件， CSS checkbox hack 不仅能做手风琴效果，还有完成更多有趣的效果，比如实现常见的导航切换

3.2K2 0

使用 CSS Checkbox Hack 技术制作一个手风琴组件

为了让大家更好理解，我将和大家一起一步步的进行完成。 手风琴样式效果：下图是我们要制作的手风琴效果本示例需要你具备一些关于flexbox的知识。...1、创建 HTML 标记结构在本练习中，我们从维基百科找一些四种不同类型的内容介绍：动物、植物、空间和河流。...然后我们创建相应的单选按钮，并为其分配内容关键词：建立无序列表接下来，我们设置一个包含4行的无序列表，每行列表包含了标题项标签和内容项标签：首先我们在标题选型卡外层定义标签...：接下来我们来定义手风琴整体外观布局，让其具有响应式，用到了弹性盒子布局，设置display:flex, 同时又应用到了CSS的自定义变量新属性，方便我们进行统一设置和修改，示例代码如下：然后我们定义无需列表...， CSS checkbox hack 不仅能做手风琴效果，还有更多有趣的效果等待你挖掘，比如实现常见的导航切换、点击按钮弹出层的效果，不用写一行JS代码，是不是觉得CSS很神奇呢，在接下来的文章，我将会给大家继续分享

5.3K3 0

DevTools（Chrome 85）的新功能

// 每日前端夜话第371篇 // 正文共：2700 字 // 预计阅读时间：10 分钟 ? DevTools 是开发和测试 Web 应用时最有用的工具之一。...你可以在 Chrome 发行渠道[7] 页面上了解有关 Chrome 发行版本的更多信息。...toUpperCase(); 但是直到 Chrome 84，该操作符的自动完成功能仍不被支持： ? chrome 84中的可选链现在，控制台中的属性自动完成功能可以与此操作符（user?.）...chrome 85 中的可选链其他两个更改与 sources 面板中的语法突出显示有关。在 Chrome 84 之前，私有字段和方法[16]显示为白色文本。...在 Chrome 85 之前的版本中，当代码包含以下运算符时，代码格式会被破坏： ? Chrome 85之前的 nullish 合并但是现在它被修正了[21]，并且格式可以正常使用： ?

6953 0

Chrome 120 有哪些值得关注的更新？

Chrome 120 已于近日发布了稳定版本，今天和大家来聊聊这个版本值得关注的一些更新。...这些机制一般被称为关闭请求，它们通常在桌面平台上通过 ESC 键，或者在 Android 平台则通过后退手势或按钮来实现。...Chrome 120 带来了这个问题的解决方案 —— CloseWatcher，这是一个新的 API，可以用于直接监听和响应关闭请求。...它还升级了和 popover=""，让他们能使用新的 Close Watcher API ，从而能响应 Android 的返回按钮。...手风琴效果是 GUI 设计中常见的一种设计元素，通常用于在有限的空间内展示大量内容。当我们点击某个部分时，相关的内容就会展开，而其他部分则会保持收起状态。

3951 0

收集的35个 jQuery 小技巧代码片段，可以帮你快速开发.

" ){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use }); 11.返回顶部按钮...16.禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。...'slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); }); 19.简单的手风琴效果

5.4K2 0

每个程序员都会的 35 个 jQuery 小技巧

){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use }); 返回顶部按钮...你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。

4.4K1 0

FineUI控件集合

if (control is ControlBase && (control as ControlBase).CollectionGroupName == _groupName) 84...= item; 13 } 14 }); 15 return panel; 16 } 17 18 // 点击全部展开按钮.../icon/reload.png", 82 listeners: { 83 click: function (button, e) { 84...'-', openNewWindowButton] 92 }); 93 } 94 95 96 // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动...，以及地址栏的更新 97 // 1. treeMenu, 主框架中的树控件实例，或者内嵌树控件的手风琴控件实例 98 // 2. mainTabStrip, 主框架中的选项卡控件实例

5307 0

10 个不错的 CSS 小技巧

在输入 input 类型的单选和复选框使用，当然，这也可以应用到和元素。代码片段 6....下面的 CSS 片段是一个小案例，你可以通过 MDN 学习更多关于 :is() 和 :where() 的内容。代码片段 7....比如下面的手风琴片段代码。如果你认真看下当下 web 设计的趋势，你会发现在登陆页面就会发现手风琴这种设计效果。这是一种简缩内容的方式，以节省设计空间。...常见问题解答，产品功能，使用提示等功能，都可以放在手风琴内实现。下面是纯 CSS 代码片段对其的实践。代码片段 8....使用 ::before 添加按钮的图标 image.png 每当我需要链接到外部其他资源的时候，我都会使用自定义的按钮来实现。准确来说，是一个添加图标的按钮。

9931 0

【新手指南】App原型设计：如何快速实现这6种交互效果？

最前沿的中国产品人和设计师摹客专访 Step 6: 交互设置完成，点击按钮即可预览进度条效果。 3.页面滚动随着移动端的快速发展和日益普及，我相信很多人都享受着它带来的便利。...Step 2：双击滚动区进入滚动区编辑状态，点击滚动条右侧的+号可拉长滚动区，放置更多的内容。 Step 3：点击空白区域推出编辑状态。 Step 4：点击演示即可预览页面滚动效果。...下拉菜单的形式多种多样，但最令设计师最头疼的还是手风琴菜单效果。即使是利用功能强大的Axure，想实现该效果也比较麻烦。但是利用Mockplus的“面板”组件，可以快速地做一个手风琴菜单。...Step 3：交互设置完成，可演示查看手风琴菜单效果。 6.搜索框无论是Web端还是App原型设计，搜索框都是原型中比较重要的部分。...一个好的搜索框和搜索模式可以帮助用户快速找到所需的东西，从而带给用户极棒的体验。如何利用原型设计工具制作一款简洁好用的搜索框呢？

3.2K4 0

程序员都会的 35 个 jQuery 小技巧

if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something..."X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use }); 11.返回顶部按钮...你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。...16.禁用 input 字段有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。...这是一个实现手风琴效果快速简单的方法： // Close all panels $('#accordion').find('.content').hide(); // Accordion $('

2.6K0 0

30个最优CSS动画案例分享，轻松让网页用户随心而“动”

其炫酷的内容展示方式和3D特效，能够轻松帮助网站吸引更多的用户和读者。查看动画详情 3....查看动画详情 6.CSS3 Image Accordion 推荐指数：★★★★★ 交互式手风琴设计是近年来网页设计中一大热点。...查看CSS代码阅读推荐：你的作品集够好了吗？20份精选UI设计作品集给你灵感 7.CSS3 Hover Animation 推荐指数：★★★ 鼠标悬停动画，总是能够轻松吸引和引导用户。...查看动画详情阅读推荐：如何避免设计出“烦人” 的登陆和注册页面 10.Stepper 3D Transition Animation 推荐指数：★★★★ 此款动画设计通过采用3D转换技术，打造出了一款极其吸睛炫酷的网页选择按钮设计...查看CSS代码更多美观炫酷的网页动画分享： 16.Tricky CSS Hover Animation 推荐指数：★★★ 查看CSS代码 17.

37.1K7 11

不负青春，砥砺前行，VueAdminWork—2.0与您继续同行，众多实用功能等您而来

涉及文件： - src/hooks/useTabbar.ts （新增） - src/view/index/tabbar.vue （新增） - 重要新增：新增 app 配置功能：可以菜单是否为 `手风琴...- 优化：`权限按钮` 展示位置时是 `default`，（default 默认是所有位置都展示） `top` 和 `tablLine` 都展示 - 微调：`main.vue` 和 `work-place.vue...完善 Menu 功能，新增菜单手风琴模式功能。此功能只在左右布局模式下生效，同时也可以进行配置。 3. 新增对 tabbar 的操作功能。...同时还修复了些许bug，以及优化了很多代码流程，让页面更加流畅，更多的功能大家可以去预览地址进行查看。...那就先给大家介绍这么多功能，我们会一直不断优化升级新增更多实用的功能，尽大限度的节省大家平时开发的时间~~~~

8382 0

Google Chrome浏览器漏洞使数十亿用户遭受数据被盗风险

PerimeterX网络安全研究人员Gal Weizman表示，该漏洞编号为CVE-2020-6519，存在于Windows、Mac和安卓的Chrome、Opera和Edge浏览器中，潜在影响用户多达十亿...其中，Chrome的73版本（2019年3月）到83版本均会受到影响，84版本已在7月发布，并修复了该漏洞。Chrome浏览器拥有超过20亿用户，并且占浏览器市场的65％以上。...Chrome的CSP强制执行机制中存在漏洞并不直接表示网站已被破坏，因为攻击者还需要设法从该网站获取恶意脚本。...网站开发人员允许第三方脚本修改支付页面，比如知道CSP会限制敏感信息，所以破坏或者绕过CSP，便可以窃取用户敏感信息比如支付密码等。这无疑给网站用户的信息安全带来很大的风险。...考虑基于JavaScript的影子代码检测和监视，以实时缓解网页代码注入 3.确保Chrome浏览器版本为84或更高版本。

5212 0

前端开发者都应知道的 jQuery 小技巧

在新窗口打开外部链接找到文本元素切换可视与隐藏的触发器 Ajax 调用的错误处理链式操作回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法...禁用 input 字段有时你也许想让表单的提交按钮或其文本输入框变得不可用，直到用户执行了一个特定行为（例如确认 “我已经阅读该条款” 的复选框）。...或许你只是想在用户点击某物时展现一个元素，使用 fadeIn 和 slideDown 都很棒。...slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); }); 简单的手风琴效果... 这是一个快速实现手风琴效果的简单方法： // Close all panels $('#accordion').find('.content').hide(); // Accordion

2.3K3 0

WPF 非客户区的触摸和鼠标点击响应

默认在 WPF 里面是不响应非客户区的鼠标事件，但响应触摸事件在没有喝下午茶的时候 lsj 告诉我，在项目里面在一个定制的窗口里面的非客户区用鼠标点击不了一个按钮，但是用触摸可以点击按钮。...使用 WindowChrome，在自定义窗口标题栏的同时最大程度保留原生窗口样式（类似 UWP/Chrome） - walterlv 敲黑板，下面的知识点要考默认的 WPF 程序支持在非客户区响应 Touch...触摸，但不响应鼠标点击和 Pointer 触摸如果需要在非客户区也就是窗口标题栏支持鼠标点击，那么请在按钮添加附加属性 WindowChrome.IsHitTestVisibleInChrome 为...： https://blog.lindexi.com/post/WPF-%E9%9D%9E%E5%AE%A2%E6%88%B7%E5%8C%BA%E7%9A%84%E8%A7%A6%E6%91%...如果你想持续阅读我的最新博客，请点击 RSS 订阅，推荐使用RSS Stalker订阅博客，或者前往 CSDN 关注我的主页本作品采用知识共享署名-非商业性使用-相同方式共享

1.2K2 0

前端无障碍开发指南

空链接和空按钮，指不包含不包含实际的文本的标签或标签。这些标签只包含一个图像或一个文本的图像，会导致使用 ATs 设备的用户无法感知可交互元素的实际用途。 4....不同的语言类型在屏幕阅读器中的发音是不同的，比如six单词在法语和英文两种类型的屏幕阅读器中的发音就非常的不同。...但我们在开发时往往会忽略 HTML 元素的实际语意，而更多采用无语意的和标签（和之外的近 104 个 HTML 标签都具有语义信息）。...与标签类似，读屏软件对于和标签的信息获取，依赖于标签包裹的文本。使用”阅读更多“，甚至图片作为这类标签的包裹内容，并不能为用户提供足够的信息。...比如当一个组件包含标签时，可能在一些位置该组件会破坏原有 HTML 文档结构。

8572 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云