jquery實現點擊控制div的顯示和隱藏

我們使用點擊顯示、點擊隱藏的時候，一般有兩種可選方案

.示例 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 來實現隱藏/顯示