jQuery toggle()方法：切换元素的可见状态（附带实例）

jQuery 提供了两种控制元素的隐藏和显示的方法，一种是分别隐藏和显示匹配元素，借助 hide() 和 show() 方法可以实现；另一种是切换元素的可见状态，也就是如果元素为显示状态，切换为隐藏状态；如果元素为隐藏状态，切换为显示状态。

使用 toggle() 方法可以切换元素的可见状态，也就是说如果元素为显示状态，切换为隐藏状态；如果元素为隐藏状态，切换为显示状态。

toggle() 方法的语法格式如下：

toggle();

【实例】通过单击普通按钮隐藏和显示全部 <div> 元素。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中创建两个 <div> 元素，具体代码如下：

<div>C语言中文网</div>
<div>C语言入门教程</div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，用来切换全部 <div> 元素的隐藏和显示状态。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("input[type='button']").click(function() {
        $("div").toggle();
        // 切换全部 <div> 元素的隐藏和显示状态
    });
});
</script>

运行本实例，单击下图中所示的“切换状态”按钮：

图 1 页面初始状态

可以看到两个 <div> 元素的内容都被隐藏，如下图所示：

图 2 隐藏<div>元素内容

此时再单击“切换状态”按钮，可以看到两个 <div> 元素的内容再次显示。

jQuery toggle()方法：切换元素的可见状态（附带实例）

相关文章