jq中的toggle和toggleClass_jq toggle-优快云博客

这篇博客探讨了在jQuery中如何高效地使用toggle和toggleClass方法来实现元素类的切换和显示隐藏效果。作者分享了在实际项目中避免冗余代码的经验，指出通过事件触发的元素类操作可以更加简洁。

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

最近用到元素类的切换和div的显示与隐藏，用愚蠢的方法做完了项目，才发现有更简洁的方法。

下面是css和html部分：

<style>
        div{
            background-color: black;
            width:300px;
            height: 300px;
        }
        .one{
            background-color: red;
        }
    </style>

 <div></div>
    <button id='but'>click me</button>

（1）原始情况下我们如果要想触发事件隐藏一个div，应该是这样的:：

 $('#but').click(function(){
        if($('div').css('display')=='block'){
            $('div').css('display','none');
        }else{
            $('div').css('display','block');
        }
    });

有了toggle方法之后，简化成如下：

$('#but').click(function(){
        $('div').toggle('slow');  //隐藏或显示元素，如果当前div元素是隐藏的，则显示，如果是显示的，则隐藏（可设置隐藏显示的快慢变化）
    });

（2）原始情况下我们如果想通过事件触发给元素一个class，再次触发时删除该类，应该是这样的：

$('#but').click(function(){
        if($('div').hasClass('one')){
            $('div').removeClass('one');
        }else{
            $('div').addClass('one');
        }
    });

有了toggleClass方法之后，简化成如下：

 $('#but').click(function(){
        $('div').toggleClass('one');  //类切换，如有当前div元素有one这个类，则去掉，没有则加上
    });

（3）在jQ框架的1.9版本之前（不包括1.9），toggle还有一个能力，就是顺序执行其参数（函数）的能力，如下：

$('#but').toggle(   //千万注意，这个方法只有1.9版本之前的jq才支持，1.9及其之后的版本jq插件取消了此方法和live方法
        function(){
            $('div').css('background-color','green');},
        function(){
            $('div').css('background-color','red');},
        function(){
            $('div').css('background-color','yellow');
        }
    );

当#but按钮被点击第一次时，div的背景色变为green，被点击第二次时背景色变为red，被点击第三次时背景色变为yellow，被点击第四次时又重新轮回，变为green，如此循环。