jquery实现点击控制div的显示和隐藏

Posted 2021-02-16 mica

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

.示例 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 来实现隐藏/显示