jQuery下的顯示和隱藏

由於過久沒更新了，因此來放一點沒意思的內容。

 

 

作的是jQuery框架的隱藏和顯示，HTML以下：

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li class="hide">5</li>
            <li class="hide">6</li>
            <li class="hide">7</li>
            <li>8</li>
            <a href="#" onclick="fun()">more</a>
        </ul>

 

Javascript：

            var vis=false;
            $(".hide").hide();
            function fun(){
                if(vis==false)
                {
                    $(".hide").show();
                    $("a").html("less");
                    vis=!vis;
                }
                else
                {
                    $(".hide").hide();
                    $("a").html("more");
                    vis=!vis;
                }
            }

首先設定一個布爾量vis表示目前是否已經顯示，而後在函數裏寫一個分支，調用show(), hide()兩個函數進行操做，另外還要把連接的html更改一下，vis取反。

 

後來翻了一下資料，有一個叫toggle()的函數，是用來切換show和hide的，這樣直接用一個函數就能完成操做了。

而toggle()的實質是更改style的display屬性，因此直接利用display來判斷的話，能夠將vis變量也節省掉。

更新的JS代碼以下：

            $(".hide").hide();
            function fun(){
                if($(".hide").css("display")=="none")
                {
                    $(".hide").show();
                    $("a").html("less");
                }
                else
                {
                    $(".hide").hide();
                    $("a").html("more");
                }
            }