使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

使用jQuery的toggle()方法对HTML标签进行显示、隐藏是一个非常常见和实用的功能。

1. 基本语法

toggle() 方法可以用来切换被选元素的可见状态（隐藏或显示）。它不需要任何参数。

以下是该方法的基本语法：

$(selector).toggle(speed,callback);

其中，selector是需要进行操作的HTML标签的选择器，speed是切换淡入淡出效果的速度，单位为毫秒，如果不需要淡入淡出效果可以不填写；callback是动画完成时所执行的函数。

2. 示例1

以下是一个简单的示例，通过点击按钮来隐藏/显示一段文字：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>toggle()方法示例1</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#content").toggle();
            });
        });
    </script>
    <style>
        #content{
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏/显示</button>
    <div id="content">
        <p>我是一段隐藏/显示的文字。</p>
    </div>
</body>
</html>

上述示例中，我们首先引入了 jQuery 库，然后通过 $(document).ready() 来确保页面加载完成后再执行 JS 代码。当按钮被点击时，我们使用 $("#content").toggle() 将id为 #content的div标签进行切换显示/隐藏。

3. 示例2

以下是另一个示例，通过点击图片来隐藏/显示另一张图片：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>toggle()方法示例2</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#img1").click(function(){
                $("#img2").toggle("slow");
            });
        });
    </script>
    <style>
        img{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="img1.jpg" alt="图片1" id="img1">
    <img src="img2.jpg" alt="图片2" id="img2">
</body>
</html>

上述示例中，我们首先引入了 jQuery 库，然后通过 $(document).ready() 来确保页面加载完成后再执行 JS 代码。当第一张图片被点击时，我们使用 $("#img2").toggle("slow") 将id为 #img2 的第二张图片进行切换淡入淡出效果的显示/隐藏。