切换当前元素的可见性

2024-01-30

我正在尝试写一个函数toggle_active单击即可显示隐藏内容,再单击一次即可再次折叠内容。可悲的是,它不起作用。你能帮我修改一下吗?

function toggle_active(this){
  var x = this.nextSibling;
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  };
}
.daccord_b{
    display:none;
}
<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>

使用方法nextElementSibling返回下一个元素。并且没有必要使用if {}操作员。

不要使用this对于函数中的参数。

完成任务的更正确方法是方法toggle(),你的类在 css 中使用它.daccord_b.

function toggle_active(el) {
    var x = el.nextElementSibling;
    x.classList.toggle("daccord_b");
}
.daccord_b {
    display: none;
}
<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>

第二种解决方案使用style.display.

function toggle_active(el) {
    var x = el.nextElementSibling;
    x.style.display = x.style.display === 'block' ? 'none' : 'block';
}
.daccord_b {
    display: none;
}
<header class="ca_h" onclick="toggle_active(this);">
    <i class="i i-plus ca_hi"></i>
    Title
</header>
<div class="had daccord_b">Hidden content</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

切换当前元素的可见性 的相关文章

  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • 判断一个数字是否能被 3 或 5 整除 (FizzBu​​zz)

    如何根据输出是否能被 3 或 5 整除来更改输出 如果它能被 3 整除 我想显示 rock 如果它能被 5 整除 我想显示 star 类似于 FizzBu zz 如果两者都有 他们都会看到 这是我的代码 if var n Math floo
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • 为什么 Web Worker 性能在 30 秒后急剧下降?

    我正在尝试提高在网络工作人员中执行时脚本的性能 它旨在解析浏览器中的大型文本文件而不会崩溃 一切都运行得很好 但我注意到使用网络工作者时大文件的性能存在严重差异 于是我做了一个简单的实验 我在同一输入上运行脚本两次 第一次运行在页面的主线程
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • 如何在php中使用preg添加html属性

    我正在寻找在 php 中编写一个脚本来扫描 html 文档并根据它找到的内容向元素添加新标记 更具体地说 我是扫描文档并为每个元素搜索CSS标记 float right left 如果找到它 它会添加align right left 基于它
  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • Node.js 未处理的“错误”事件

    我编写了一个简单的代码并将其保存在文件 try js 中 var http require http var makeRequest function message var options host localhost port 8080
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • JavaScript 数组扩展语法的时间复杂度是多少?

    我想知道在 JavaScript 中使用数组扩展的时间复杂度是多少 是线性 O n 还是常数 O 1 下面的语法示例 let lar Math max nums 传播称为 Symbol iterator 有关对象的属性 对于数组 这将迭代数
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗?

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐

  • 如何提高Python 3.6中的SQLite插入性能?

    背景 我想使用 Python 向 SQLite 插入 100 万条记录 我尝试了很多方法来改进它 但仍然不太满意 数据库使用 0 23 秒将文件加载到内存 搜索pass如下 但 SQLite 加载并插入文件需要 1 77 秒 环境 英特尔酷
  • SoundCloud API v3 Stream 在 Chrome 中无法工作

    几个月来我一直试图让它发挥作用 但仍然不起作用 它在除 Google Chrome 之外的所有浏览器中都能正常工作 问题是音频无法在 Chrome 中传输 这是一个最基本的 JS 小提琴示例 https jsfiddle net sq23u
  • ExtJS 4 应用程序登录和身份验证及权限

    我正在使用新推荐的应用程序结构在 Ext JS 4 上开发一个 Web 应用程序 因此我需要实施一个身份验证和权限系统 到目前为止的想法 服务器负责保证用户的角色和权限 ExtJS前端必须根据权限和角色进行更改 我使用卡片布局 第一个选项卡
  • 使用 Nodejs 面对 api

    我正在使用使用 Node js 的 Azure Face api 下面是代码 然而 我想使用本地图像并发布它 而不是托管一些图像 我尝试了不同的选项 但它无法识别图像格式或无效的图像网址 以下是我尝试过的事情 1 var stream fs
  • 知道hadoop中数据节点的磁盘空间吗?

    有没有一种方法或任何命令可以让我了解每个数据节点的磁盘空间或总集群磁盘空间 我尝试了命令 dfs du h 但似乎我没有权限对许多目录执行它 因此无法获取实际的磁盘空间 From UI http namenode 50070 dfsheal
  • 为什么在 JpaTransactionManager 中使用 jpadialect

    我正在从 Spring in Action 学习 spring 3 0 那里讨论了在 JpaTranactionManager 中使用 jpadialect 的重要性
  • 使用 !source 的 gitconfig 别名不起作用 (zsh)

    我有一个像这样的 gitconfig alias l source githelpers pretty git log 当我运行它时 我得到这个 desktop git l source githelpers pretty git log
  • 设置 geopandas 地图的中心

    我可以用 geopandas 绘制世界地图 world geopandas read file geopandas datasets get path naturalearth lowres fig ax plt subplots worl
  • 使用 opencart 获取多商店设置的商店 ID

    我们设置了多个商店 我想稍微更改每个商店的模板 我仔细查看了已经存在的代码并发现了这些 this gt config gt get config store id this gt load gt model setting store re
  • 如何获取 Windows 版的 python-dev?

    我们正在尝试安装 PIL 并收到错误 error command gcc failed with exit status 1 许多类似的问题 包括这个 安装 Reportlab 错误 命令 gcc 失败 退出状态为 1 https stac
  • 如何在“

    余烬绑定数据属性指南 https guides emberjs com v2 10 0 templates binding element attributes 说 如果您使用带有布尔值的数据绑定 它将添加或删除指定的属性 我正在尝试使用此
  • 哪个系统调用返回连接到 Linux 系统的设备列表?

    我正在尝试编写一个 C Java 程序 它将显示连接到系统的设备列表 非常感谢在这方面的任何帮助 lsusb http www cyberciti biz faq linux how do i list all usb devices 命令
  • iOS EXC_BAD_ACCESS:如何调试?

    我收到 EXC BAD ACCESS 我知道这通常意味着什么 尝试访问 不再 的对象是最可能的原因 那么 我在哪里可以找到它 我在网上看了很多帖子 他们都说 方案中 启用 NSZombie 现在 当我运行调试器时 我应该查看什么 我看不出有
  • Thread.join 和 Synchronized 有什么区别?

    我很困惑何时使用Thread join 以及何时使用synchronization在多线程应用程序中 根据我的说法 它们都阻塞或等待其他线程完成执行 此示例必须按顺序模式依次输出 10 个 A 10 个 B 和 10 个 C 如下所示 1
  • template 与 template 不匹配是一个缺陷吗?

    在探索的同时这个答案 https stackoverflow com a 47730794 1366368我发现采用参数包的模板不会被需要具有特定数量参数的模板的模板所接受 在我看来 这是一个缺陷 因为如果模板可以采用任意数量的参数 它应该
  • 在纹理数组中绘制Texture2D图集

    如何通过 GLSL Sampler 仅绘制存储在纹理数组中的纹理2D 图集的一部分 例如 我有纹理图集 我会将它们放在一起 与相同大小的其他图集 在Texture2D数组里面 glTexSubImage3D 那么 在这种情况下我的采样器应该
  • 为什么我们需要快速正文解析器?

    我遇到了很多博客和文章 他们建议使用 body parser 来解析请求正文数据 有没有办法在不使用任何中间件的情况下解析数据或从正文获取正文数据 默认情况下 express 只为您提供原始 HTTP 请求正文req论证作为Incoming
  • Lambda 没有自动推断返回类型

    当我回答我自己的问题时https stackoverflow com a 32115498 383779 https stackoverflow com a 32115498 383779 我又有一个疑问了 In const CArray
  • 如何逐行运行Linux程序

    我想使用一些调试器逐行运行 GTK C 程序 我从未调试过 Linux 程序 那么在哪里可以找到针对初学者如何调试代码的说明呢 我只是有一个想法 我必须从网上下载源代码 使用调试符号编译项目并通过 DDD 或 GDB 运行源代码 那么任何人
  • 切换当前元素的可见性

    我正在尝试写一个函数toggle active单击即可显示隐藏内容 再单击一次即可再次折叠内容 可悲的是 它不起作用 你能帮我修改一下吗 function toggle active this var x this nextSibling