在jQuery中切换隐藏/显示

2023-05-16

使用jQuery的toggle()方法来切换隐藏/显示 使用jQuery的切换()方法来切换隐藏/显示

在 toggle() 方法的用例中,我们通常通过 click 事件触发它。同样,在该方法的实现中,还有另一个 click 事件以及 preventDefault()

因此,它使双击事件无效,并且应该可以正常工作。但是该方法过于直接,如果事件被调用超过两次,通常会导致问题。

所以,为了摆脱这种模棱两可的特点,后来,该方法被删除了。然而,它仍然被视为用于显式,它可以用更少的代码行而不是以任何其他方式使用。

让我们看一下用于演示该函数的代码。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    $("#ele2").toggle(1500);
  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

使用hide()和show()方法切换隐藏/显示 使用Hide()和Show()方法切换隐藏/显示

在这里,我们将启动 click 事件的实例,然后生成一个条件语句来检查单击按钮时内容是否可见。如果它驱动到一个真实案例,我们将其设置为 hide();否则,我们将其设置为 show()

让我们检查代码块并检查过程。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $("#ele1").click(function(){
    var x = $('#ele2');
    if(x.is(':visible')){
      x.hide("slide");
    }
    else{
      x.show("slide");
    }

  });
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在jQuery中切换隐藏/显示 的相关文章

  • 禁用选择标签内的一个选项值在 IE6Ha 中不起作用[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个包含 4 个值 a b c d 的选择框 我只想禁用下拉列表中的 c 我使用了禁用属性 它在所有浏览器中都有效 但在 IE6
  • 添加 Javascript 按钮来更改 iframe 的内容

    我正在尝试创建此页面 其中有一个 Iframe 并且我想添加一个按钮来显示 iframe 中的下一页 以及一个按钮来显示 iframe 中的上一页 我总共有 4 个页面要在名为 1 html 2 html 3 html 4 html 的 i
  • 如何让我的“点击”功能与 iOS 配合使用

    我有一组充当按钮的 Div 这些按钮有一个简单的 jquery click 函数 该函数适用于除 iOS 之外的所有浏览器 例如 div class button click me div and button click function
  • 是否有一个 jquery List 插件可以自动排序项目并具有强大的添加/删除方法?

    我已经在谷歌上搜索了几个小时 寻找一些东西来处理我的情况 我还不够熟练 无法编写自己的 jquery 插件 该插件应该自动对列表进行排序 这并不像能够轻松地从列表中添加 删除项目那么重要 Themeroller 功能将是一个优点 我基本上会
  • 在模态上自动滚动引导模态('show')

    我有一个用于评论的引导模式 评论表格附加在评论列表的底部 我希望此模式在打开时滚动到列表底部 如果有超过 2 或 3 条评论 我已经安装了这个幻灯片插件 http jesseprice com jquery slide to plugin
  • 无法使用 jQuery 添加两个小数

    我试图将两个小数值相加 但返回的总和是纯整数 怎么了 我找不到它 欢迎任何帮助 jQuery delivery method ship select change function var cost jQuery this val jQue
  • 选择 jQuery 中的每第 n 个项目?

    jQuery 有方便的 even 和 odd 选择器 用于选择集合中偶数或奇数索引的项目 我用它来清除一系列浮动框中的所有其他项目 如下所示 div class 2up div div div div div div div and Cle
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • jQuery .nothas?

    有没有办法做相当于 nothas jQuery 中的选择器 例如 如果我想添加一个TBODY to all TABLE如果元素还没有 那么最好做这样的事情 TABLE nothas TBODY append tbody tbody 如果这可
  • 用空字符串替换状态:Javascript

    我有这个网址 website com con blog true 我在 javascript 中所做的是 if getURLparams blog RandomFunction change the url window history r
  • asp.net mvc - Ajax 刷新视图的每个元素

    希望在退出 jquery 对话框后使用 ajax 刷新当前页面 我有一个包含 foreach 循环的视图 数据是从模型中提取的 每个循环有 2 个编辑 删除按钮 当我单击 编辑按钮 时 将打开一个 jquery UI 对话框进行编辑 当我保
  • 选择 jQuery 数据网格插件? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • iFrame 中的 Javascript iPhone 滚动效果 / Javascript 鼠标加速

    我正在尝试使用 JavaScript 在窗口中重新创建 iPhone 轻拂 滚动事件 从 JQuery 开始 我使用计时器测量单击 拖动 释放事件期间鼠标的加速度和偏移量 var MouseY init function context v
  • 如何允许点击穿过 div 但仍然对悬停做出反应?

    说我有divA部分重叠的divB 我怎样才能允许点击divA穿过去divB但仍然有hover悬停时触发divA 我知道pointer events none 这使得点击通过 但也阻止了悬停 我也尝试过以下方法 但它不允许点击失败 docum
  • 元素存在之前的html5音频绑定时间更新

    我试图从音频标签绑定 timeupdate 事件 该标签尚不存在 我习惯这样做 body on click selector function e 我用音频标签尝试了这个 body on timeupdate audioPlayerJS a
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • getJson问题,它返回未定义

    大家好 我有这个代码 var temp if method 1 temp Words val get the words from textbox else getJSON http localhost mine test js funct
  • jPlayer 无法在 Firefox 中播放 mp3

    我正在集成 jplayer 来播放由使用 jQuery 的单击事件触发的精选 mp3 文件 用于实现此目的的代码是 play link click function jquery jplayer 1 jPlayer destroy srcF
  • 如何让导航栏在向下滚动页面时改变颜色?

    我希望导航栏是透明的 但是当您向下滚动页面时 它会变为红色 div class nav div class container div class logo a href img src RepublicSquare logo svg st
  • 使用 jQuery 的 ajax 方法以 blob 形式检索图像

    我最近问了另一个 相关 问题 这导致了这个后续问题 提交数据而不是输入表单的文件 https stackoverflow com questions 17643142 submitting data instead of a file fo

随机推荐

  • VS 2022 C++ 自定义头文件示例

    前言 xff1a 博主最近刚从VS Code转到VS 2022 xff0c 但发现自定义的方法和VS Code有些不同 xff0c 故出一期VS 2022自定义头文件的博客 xff0c 时间仓促 xff0c 请不吝赐教 如何联系我 xff1
  • 零基础搭建网站(保姆级教程)

    前言 xff1a 本教程不需要任何前置知识 xff0c 零基础教您搭建网站 如何联系我 xff1f wei haoran 64 outlook com 正文 xff1a 搭建网站需要什么 xff1f 1 域名 xff1b 2 服务器 xff
  • 驱动框架入门之LED-linux驱动开发第4部分-朱有鹏-专题视频课程

    驱动框架入门之LED linux驱动开发第4部分 5199人已学习 课程介绍 本课程是linux驱动开发的第4个课程 xff0c 主要内容是驱动框架的引入 通过led驱动框架和gpiolib的这两个框架的详细解释 xff0c 让大家学习内核
  • VSCode远程连接服务器(SSH免密登录)

    前文 连接远程服务器的方式众多 xff0c 本文将介绍基于VS Code的SSH免密登录方法 在开始SSH远程链接以前 xff0c 您需要完成以下步骤 xff1a 1 Windows配置SSH xff1a 1 以Windows平台为例 xf
  • Linux云服务器防止暴力破解(三道SSH安全策略)

    前言 新购入的服务器 xff0c 往往用户名默认为root xff0c ssh默认开放22端口 xff0c 且配置SSH服务时往往同时允许密码和公钥二重登录 然而 xff0c 许多非法服务器运行着暴力破解程序 xff0c 通过访问用户名ro
  • Git快速入门(图文教程)

    前言 xff1a Git是目前最流行的版本控制工具之一 xff0c 它可以帮助我们更好地管理代码 xff0c 协作开发 xff0c 以及保证代码的安全性 在学习Git之前 xff0c 我们需要先了解几个概念 xff1a workspace
  • VS Code + phpstudy实现PHP环境配置

    概述 xff1a 要使用VSCode进行PHP开发 xff0c 需要先在本地搭建PHP环境 xff0c 并将其配置到VSCode中 下面是具体的步骤 xff1a 1 下载安装PHPStudy 首先 xff0c 我们需要从PHPStudy官网
  • CSS圆角边框

    设置css圆角边框 1 border radius 属性用于向元素添加圆角边框 css圆角边框代码 xff1a border radius 15px 2 对应四个角 xff0c CSS3提供四个单独的属性 xff1a border top
  • CSS渐变色

    渐变 xff1a 通过渐变可以设置一些复杂的背景颜色 xff0c 可以从实现一个颜色向其他颜色过渡的效果 渐变是图片 xff0c 通过 background image设置 CSS 定义了两种渐变类型 xff1a 线性渐变 xff08 向下
  • js的for循环语句

    For循环语法 xff1a for 循环是在您希望创建循环时经常使用的工具 for 循环的语法如下 xff1a for 语句 1 语句 2 语句 3 要执行的代码块 语句 1 在循环 xff08 代码块 xff09 开始之前执行 语句 2
  • 了解 JavaScript 构造函数

    以下是Faraz Kelhini的客座文章 其中一些东西超出了我的舒适区 xff0c 所以我请凯尔辛普森为我进行技术检查 凯尔的回答 xff08 我们在办公时间会议期间所做的 xff09 非常有趣 它是 xff1a 1 xff09 这篇文章
  • JavaScript 字符串加密和解密

    使用CryptoJS 加密和解密 JavaScript 字符串 使用NcryptJS 加密和解密 JavaScript 字符串 使用CryptoJS 加密和解密 JavaScript 字符串 CryptoJS 是一个 JavaScript
  • DOM特效

    第一节 xff1a 模态框拖拽 1 offset 偏移量 offset 翻译过来就是偏移量 xff0c 我们使用 offset系列相关属性可以动态的得到该元素的位置 xff08 偏移 xff09 大小等 offset 可以得到任意样式表中的
  • linux设备驱动模型-linux驱动开发第5部分-朱有鹏-专题视频课程

    linux设备驱动模型 linux驱动开发第5部分 4285人已学习 课程介绍 本课程是linux驱动开发的第5个课程 xff0c 主要内容是linux的设备驱动模型 xff0c 包括总线 类 设备 驱动等概念 xff0c 重点通过plat
  • 工作两三年的人才能体会的软件设计思想

    最近看了几本关于编程的书籍 xff0c 都是些讲解软件架构和设计的书 根据目前脑袋中还残留的记忆 xff0c 相关知识总结如下 xff1a 1 编程范式 目前被提出来的编程范式为 xff1a 结构化编程范式 面向对象编程范式 函数式编程范式
  • es6 的箭头函数

    箭头函数是 ES6 里面一个简写函数的语法方式 重点 xff1a 箭头函数只能简写函数表达式 xff0c 不能简写声明式函数 function fn 不能简写 const fun 61 function 可以简写 const obj 61
  • 使用 JavaScript 绘制圆

    图形是任何 Web 应用程序的重要组成部分 HTML 提供了两种创建图形的方法 xff0c 第一种是 canvas xff0c 另一种是 SVG 在今天的帖子中 xff0c 我们将学习如何使用画布和 JavaScript 在 HTML 中创
  • 闭包和引用

    闭包是 JavaScript 一个非常重要的特性 xff0c 这意味着当前作用域总是能够访问外部作用域中的变量 因为 函数 是 JavaScript 中唯一拥有自身作用域的结构 xff0c 因此闭包的创建依赖于函数 模拟私有变量 span
  • 在 JavaScript 中隐藏表格行

    在 JavaScript 中 xff0c 我们可以在一个通用的类下定义某些表数据 xff0c 该类将具有一些可配合的功能 此特定函数将声明该表的行在选择性触发器上的行为方式 在 JavaScript 中 xff0c 我们可以在一个通用的 类
  • 在jQuery中切换隐藏/显示

    使用jQuery的toggle 方法来切换隐藏 显示 使用jQuery的切换 方法来切换隐藏 显示 在 toggle 方法的用例中 xff0c 我们通常通过 click 事件触发它 同样 xff0c 在该方法的实现中 xff0c 还有另一个