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");
                }
            }