jQuery 切换元素可见状态的方法

最新推荐文章于 2025-06-24 10:55:52 发布

weixin_39612961

最新推荐文章于 2025-06-24 10:55:52 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_39612961/article/details/80872669

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍jQuery中toggle及toggleClass方法的使用技巧，包括如何通过toggle切换元素的可见状态，利用toggleClass添加或移除CSS类。适用于网页交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击按钮“Toggle”，实现文本的显示和隐藏

1.toggle() 方法切换元素的可见状态

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素

<button class="btn1">Toggle</button>
<p>This is a paragraph.</p>

$(".btn1").click(function(){
  $("p").toggle();
});

toggle() 方法接受三个参数，具体参见w3c

speed: 切换可见与隐藏的速度

callback: 执行完toggle()后执行的函数

switch: 是否只显示或隐藏

toggle() 方法可以绑定两个或多个事件处理器函数，响应被选元素的轮流click事件，如切换背景三种颜色

$("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
);

2. toggleClass()

判断对应的元素上是否存在指定的class，如果有就删除，没有就增加

<button>隐藏文本</button>
<p>这是一个段落。</p>

.main{
    font-size:120%;
    color:red;
    display:none;
}

$("button").click(function(){
    $("p").toggleClass("main");
});