jQuery点击隐藏和显示

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

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

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



            });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值