jQuery点击隐藏和显示

来源：互联网发布：apache base64 encode 编辑：程序博客网时间：2024/05/15 23:54

列举几个显示/隐藏的方法

点击前：这里写图片描述
点击后:

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>        <script type="text/javascript"><body>        <div id="panel">            <h5 class="head">什么是jQuery?</h5>            <div class="content">                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。            </div>        </div>    </body>

1. 方法一

为 .head 添加 Onclick 响应函数: 若 .content 隐藏则显示, 若 .content 显示, 则隐藏

$(function(){    $(".head").click(function(){        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定        //的选择器.         var flag = $(".content").is(":hidden");        if(flag){            //show() 方法: 使隐藏的变为显示            $(".content").show();        }else{            $(".content").hide();        }    });});

2. 方法2

bind: 为某 jQuery 对象绑定事件.

    $(".head").bind("click", function(){        //使用 is() 方法, 来判断某个给定的 jQuery 对象是否符合指定        //的选择器.         var flag = $(".content").is(":hidden");        if(flag){            //show() 方法: 使隐藏的变为显示            $(".content").show();        }else{            $(".content").hide();        }    });

3. 方法3

mouseover: 鼠标移上去显示
mouseout: 鼠标移出隐藏.

$(".head").mouseover(function(){        $(".content").show();})    .mouseout(function(){        $(".content").hide();});

4. 方法4

合成事件: hover: 鼠标移上去执行第一个函数, 移出执行第二个函数.

        $(".head").hover(function(){        $(".content").show();    }, function(){        $(".content").hide();    });

5. 方法5

合成事件: toggle: 第一次点击执行第一个函数, 第二次点击执行第二个

    //函数 ... 循环执行.     $(".head").toggle(function(){    $(".content").show();},     function(){        $(".content").hide()    });*/

显示，隐藏模块小例子

点击前：这里写图片描述
点击后:
代码段：

<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>        <script type="text/javascript">$(function(){                //1. 需要选择从 "富士" - "爱国者" 的所有 li: $category                var $category = $("li:gt(5):not(:last)");                //2. 把他们隐藏.                 $category.hide();                //3. 为 .showmore 添加一个 onclick 响应函数(取消默认行为)                $(".showmore").click(function(){                    //4. 若 $category 是隐藏的. 使用 is                    if($category.is(":hidden")){                        //4.1 $category 显示                        $category.show();                        //4.2 使 "佳能", "尼康", "奥林巴斯" 变为高亮显示:                         //添加 .promoted 的 class                        $("li:contains('佳能'),li:contains('尼康'),li:contains('奥林巴斯')").addClass("promoted");                        //4.3 .showmore > a > span 的文字变为: 显示精简品牌                        $(".showmore > a > span").text("显示精简品牌");                        //4.4 .showmore > a > span 的 background 变为:                         //url(img/up.gif) no-repeat 0 0                        $(".showmore > a > span").css("background", "url(img/up.gif) no-repeat 0 0");                    }                    //5. 若 $category 是显示的.                     else{                        $category.hide();                        $("li").removeClass("promoted");                        $(".showmore > a > span").text("显示全部品牌");                        $(".showmore > a > span").css("background", "url(img/down.gif) no-repeat 0 0");                    }                    return false;                });            });

1 0