我们使用点击显示、点击隐藏的时候，一般有两种可选方案

.示例 html

<div class="index">
    <h1>
        首页
    </h1>
    <button id="btn">点击</button>
</div>

最简单的方法：toggle()   点击显示 h1 和 点击 隐藏 h1

$(function () {
    $("#btn").click(function () {
        $("h1").toggle();
    })
})

toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。 如果你除了显示和隐藏之外还需要同时实现其他功能的话，可以这样：

$(function () {
    $("#btn").click(function(){
        // 如果h1是显示的
        if($("h1").hasClass("show")){
            // 执行隐藏
            $("h1").hide().removeClass("show");
            // 其他
        }else{
            // 显示
            $("h1").show().addClass("show");
        }
    })
})

这里通过自定义一个 class : show 来判断 div 是显示或隐藏

hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class

除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/2899