隐藏可视组件的方法，特别是关于HTML的方法。
我写了一个jquery来显示更多和显示更少的项目。它仅适用于第一项。但是当我要去另一个项目并选择显示更多项目时。它不起作用。我明白当我
例如我们有2个按钮 第一个按钮 一些文本 - 此按钮具有动态类，例如：变体一、变体二、变体...
假设我有这个元素用于显示网站徽标： ... 假设我有这个元素用于显示网站徽标： <div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span>Website Name</span> </a> </div> #web-title将使用background:url(http://website.com/logohere.png)进行样式设置，但是如何正确隐藏文本Website Name？如此处所示：Hide text using css或此处https://stackoverflow.com/a/2705328，我见过各种隐藏文本的方法，例如： #web-title span { text-indent: -9999px; } 或 #web-title span { font-size: -9999px; } 或 #web-title span { position: absolute; top: -9999px; left: -9999px; } 我还看到一些结合了这三种方法。但实际上哪一种是有效隐藏文本的最佳实践？ 实际上，最近出现了一项新技术。本文将回答您的问题：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } 它是可访问的，并且具有比-99999px更好的性能。 更新：正如@deathlock在评论区提到的那样，上述修复的作者（Scott Kellum）建议使用透明字体：http://scottkellum.com/2013/10/25 /the-new-kellum-method.html。 你可以简单地使其透明 { width: 20px; height: 20px; overflow: hidden; color:transparent; } 你不能像这样简单地使用display: none;吗 HTML <div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span class="webname">Website Name</span> </a> </div> CSS .webname { display: none; } 或者如果您担心预留空间，可以考虑一下可见性吗 .webname { visibility: hidden; } 大多数开发者会做的方式是： <div id="web-title"> <a href="http://website.com" title="Website" rel="home"> <span class="webname">Website Name</span> </a> </div> .webname { display: none; } 我曾经也这样做过，直到我意识到您正在隐藏设备的内容。又名屏幕阅读器等。 所以通过： #web-title span {text-indent: -9000em;} 确保文本仍然可读。 将 .hide-text 类添加到包含文本的跨度中 .hide-text{ display:none; } 或使文本透明 .hide-text{ color:rgba(0,0,0,0); } 根据您的用例使用。 如果您愿意在标记中容纳此内容（就像您在问题中保留文本一样），我会使用其 CSS 帮助器中使用的任何 jQuery UI ： .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 如果您绝对拒绝为要隐藏在图像容器中的文本添加额外的标记，则图像替换技术很好。 Google（搜索机器人）需要的是向机器人提供与向用户提供的内容相同的内容。缩进文本（任何文本）会让机器人认为它是垃圾邮件或者您正在向用户和机器人提供不同的内容。 最好的方法是直接使用徽标作为锚标记内的图像。为您的图像添加“alt”。这非常适合机器人阅读，也有助于图像搜索。 这直接来自马口：http://www.youtube.com/watch?v=fBLvn_WkDJ4 截至 2015 年 9 月，最常见的做法是使用以下 CSS： .sr-only{ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } 我这样做： .hidden-text { left: 100%; display: inline-block; position: fixed; } 另一种方式 position: absolute; top: 0px; left: -5000px; 它可能会起作用。 .hide-text { opacity:0; pointer-events:none; overflow:hidden; } 可能适用于某些用例的另一个选项： .myelement { font-size: 0; color: transparent; user-select: none; } 我意识到这是一个老问题，但 Bootstrap 框架有一个内置类（仅限 sr）来处理除屏幕阅读器之外的所有内容上的隐藏文本： <a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>
如何隐藏带有文件名、面包屑和操作按钮的 VS Code 栏？
我想隐藏屏幕截图中可见的工具栏： 我可以通过进入全屏模式来隐藏菜单栏，但我无法摆脱包含文件名、运行按钮、拆分等的菜单栏...
如何隐藏 VS Code 栏以及文件名、面包屑、运行 java、拆分编辑器和更多操作？
我想隐藏屏幕截图中可见的工具栏： 我可以通过进入全屏模式来隐藏菜单栏，但我无法摆脱包含文件名、运行按钮、拆分等的菜单栏...
我想在 SwiftUI 中隐藏状态栏。我尝试过“statusBar(hidden: true)”方法，但它不起作用。有什么解决方案可以在 SwiftUI 中实现它吗？ 演示代码如下： var body：一些...
如何使用 MultiBinding 在上下文菜单中隐藏分隔符？
我在 wpf 树视图上使用上下文菜单，我几乎就可以实现我想要的。在解释问题之前，让我先解释一下上下文菜单的 XAML 定义的作用。 对于每个
我想永久隐藏访问窗口。我有一个自动执行宏，最初会隐藏窗口，但如果用户单击任务栏上的数据库图标（如果出现在我的表单后面），我...
隐藏值为 0 或 null 的列组 - Highcharts
如何隐藏一组值为0或null的列（服务1和服务3）？ Highcharts.chart('容器', { 图表：{类型：'列'}， xAxis: { 类别: ["服务 1", "
通过 CSS 为注销用户隐藏 WordPress 帖子（博客）中的标签
正如标题所示，我希望为注销用户隐藏 WordPress 帖子（又名博客）下的标签。 通常使用 CSS 这不是问题，只需打开开发者控制台 (F12) 并查看...
我有以下代码，但只有 no_open 有效，而 no_create 无效，我不明白我做错了什么？ 我有以下代码，但只有 no_open 有效，no_create 无效，我不明白我做错了什么？ <field name="requested_by" options="{'no_create': True, 'no_open': True}"/> <field name="requested_by" readonly="1"/> <field name="requested_by" create="0"/> <field name="requested_by" create="false"/> 尝试其中之一
如何在formly中隐藏字段，导致隐藏表达式通过display:none隐藏DOM，这会改变当前行和前一行中其他元素的位置。 我有一个要求，要坚持
如何在 Odoo 16 中的所有视图不同屏幕中隐藏我的收藏夹？
在此输入图像描述 我需要隐藏红色框中的项目，我可以使用Scss还是必须编写XPath？请帮助我？，谢谢！
我试图隐藏前 4 个选项卡中的活动单元格列。 我选择突出显示前 4 个选项卡并选择单元格 A1，然后使用以下代码： ActiveCell.EntireColumn.Hidden = True 这将 A 列隐藏在...
我的目标是创建一个复选框，每个月在其下方隐藏几行信息。 我对编码知之甚少，但已经成功地编写了一个简单的代码......
在 android 5+ 中使用导航抽屉时，导航栏隐藏但留出空间
我正在尝试开发一个全屏应用程序，有两个主要活动：LoginActivity 和 DashboardActivity。 LoginActivity 只有用于用户输入登录的 UI，例如用户名和密码。在这个屏幕上...
在 Unity 和 vuforia 中隐藏地平面上的 3D 对象时遇到问题
我是 Unity 和 Vuforia 的初学者。我在地平面上放置了一个 3D 对象，并且在单击按钮时尝试使用 SetActive(false) 方法隐藏它。不过，好像并没有...
使用 css 或 javascript 隐藏 Aria 标签
我想隐藏 arialabel 而不修改它，所以只需在 css 或 javascript 中添加一些代码。 我知道您可以将 display:none 放在一个类中，但是标签有类似的选项吗？ 这里是...
我希望当内所有带有“conteudoGuia”类的div都显示：无时，接收显示：无 有人可以帮助我并解释一下吗？ 我尝试了很多替代方案并且... 我希望当<dt>内所有具有“conteudoGuia”类的div都是display: none时，<dt>收到display: none 有人可以帮我解释一下吗？ 我尝试了很多替代方案，但没有得到答案。 const searchInput = document.getElementById('searchBox'); searchInput.addEventListener('input', function () { const searchTerm = searchInput.value.trim().toLowerCase(); const contentElements = document.getElementsByClassName('conteudoGuia'); for (let i = 0; i < contentElements.length; i++) { const titleElement = contentElements[i].querySelector('.tituloGuia'); const descriptionElement = contentElements[i].querySelector('.descricaoGuia'); const boldTags = contentElements[i].getElementsByTagName('b'); let matchFound = false; for (let j = 0; j < boldTags.length; j++) { const wordInTag = boldTags[j].textContent.trim().toLowerCase(); if (wordInTag.includes(searchTerm)) { matchFound = true; break; } } if (matchFound) { titleElement.style.display = ''; descriptionElement.style.display = ''; } else { titleElement.style.display = 'none'; descriptionElement.style.display = 'none'; } } }); <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <dl class="box"> <div id="searchDiv" class="searchDiv"> <input type="text" id="searchBox" name="searchText" class="searchBox" placeholder="Oque você está procurando?" /> </div> <dt>TESTE DT 1</dt> <dd> <div id="autorizacao"> <div class="conteudoGuia"> <div class="tituloGuia"> <p><b>Titulo Primeiro </b></p> </div> <div class="descricaoGuia"> <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </hr> </div> </div> </div> </dd> <dt>TESTE DT 2</dt> <dd> <div id="financeiro"> <div class="conteudoGuia"> <div class="tituloGuia"> <p><b>Titulo Segundo </b></p> </div> <div class="descricaoGuia"> <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </hr> </div> </div> </div> </dd> </dl> </body> 首先，你的代码有一个错误： </hr> 应该是 <hr>。 那么执行此操作的方法是简单地循环 dt 内的每个 div 并检查显示属性。如果全部都有display:none，也隐藏dt const searchInput = document.getElementById('searchBox'); searchInput.addEventListener('input', function() { const searchTerm = searchInput.value.trim().toLowerCase(); const contentElements = document.getElementsByClassName('conteudoGuia'); for (let i = 0; i < contentElements.length; i++) { const titleElement = contentElements[i].querySelector('.tituloGuia'); const descriptionElement = contentElements[i].querySelector('.descricaoGuia'); const boldTags = contentElements[i].getElementsByTagName('b'); let matchFound = false; for (let j = 0; j < boldTags.length; j++) { const wordInTag = boldTags[j].textContent.trim().toLowerCase(); if (wordInTag.includes(searchTerm)) { matchFound = true; break; } } if (matchFound) { titleElement.style.display = ''; descriptionElement.style.display = ''; } else { titleElement.style.display = 'none'; descriptionElement.style.display = 'none'; } } // Check if all the content elements are hidden, and if so, hide the corresponding <dt> const dtElements = document.getElementsByTagName('dt'); for (let i = 0; i < dtElements.length; i++) { const contentElementsInsideDt = dtElements[i].getElementsByTagName('div'); let allContentHidden = true; for (let j = 0; j < contentElementsInsideDt.length; j++) { if (contentElementsInsideDt[j].classList.contains('conteudoGuia') && contentElementsInsideDt[j].style.display !== 'none') { allContentHidden = false; break; } } if (allContentHidden) { dtElements[i].style.display = 'none'; } else { dtElements[i].style.display = ''; } } }); <body> <dl class="box"> <div id="searchDiv" class="searchDiv"> <input type="text" id="searchBox" name="searchText" class="searchBox" placeholder="Oque você está procurando?" /> </div> <dt>TESTE DT 1</dt> <dd> <div id="autorizacao"> <div class="conteudoGuia"> <div class="tituloGuia"> <p><b>Titulo Primeiro </b></p> </div> <div class="descricaoGuia"> <p> Some text </p> <hr> </div> </div> </div> </dd> <dt>TESTE DT 2</dt> <dd> <div id="financeiro"> <div class="conteudoGuia"> <div class="tituloGuia"> <p><b>Titulo Segundo </b></p> </div> <div class="descricaoGuia"> <p> Some other text </p> <hr> </div> </div> </div> </dd> </dl> </body>
如何保持 worksheet.visible = false 并仍然获取活动表名称和单元格地址等数据
我在 2 列中列出了 excel 文件名和这些文件的路径。使用代码，我一次打开每个工作表，在打开的工作簿中搜索特定关键字，只要找到匹配项。 ...