在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中切换隐藏/显示 的相关文章

随机推荐

  • 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 还有另一个