zoukankan      html  css  js  c++  java
  • 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");
                    }
                }
  • 相关阅读:
    C#三元运算符
    WIN系统查询版本
    C# switch 语句
    C#反编译
    AssemblyInfo.cs 文件信息
    win系统如何在桌面显示我的电脑
    MVC传值前台
    js去除html标记
    打开页面跳转到区域下的控制器
    Hive常用操作之数据导入导出
  • 原文地址:https://www.cnblogs.com/aaaaabk/p/4935292.html
Copyright © 2011-2022 走看看