jQuery点击隐藏和显示

最新推荐文章于 2024-07-15 20:12:10 发布

Bart_G

最新推荐文章于 2024-07-15 20:12:10 发布

阅读量1.2w

点赞数 11

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/rocky_03/article/details/56304341

版权

jQuery 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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

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

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



            });