点击按钮显示和隐藏列表内容

最新推荐文章于 2024-04-11 05:37:43 发布

含笑一过

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量6.6k

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/u013630488/article/details/49539401

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

点击按钮显示和隐藏列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击展开和隐藏</title>
    <link rel="stylesheet" type="text/css" href="../reset.css"> 
    <script type="text/javascript" src="../jquery-1.9.1.js"></script>
    <style type="text/css">
    #content{width: 500px;margin: 30px auto;}
    #content ul{overflow: hidden;}
    #content ul li{float: left;width: 200px;text-align: center;line-height: 30px;}
    #content .more{text-align: center;}
    #content .more span{background: url(down.png) 0px -3px no-repeat;height: 20px;width: 20px;padding-left: 20px;}
    .light{color:red;}
    </style>
</head>
<body>
    <div id="content">
        <ul>
            <li>佳能<i>（30440）</i></li>
            <li>索尼<i>（27220）</i></li>
            <li>三星<i>（20060）</i></li>
            <li>尼康<i>（20061）</i></li>
            <li>松下<i>（20062）</i></li>
            <li>卡尼欧<i>（20063）</i></li>
            <li>富士<i>（20064）</i></li>
            <li>柯达<i>（20065）</i></li>
            <li>宾得<i>（20066）</i></li>
            <li>理光<i>（20076）</i></li>
            <li>明基<i>（20078）</i></li>
            <li>爱国者<i>（20079）</i></li>
            <li>其他品牌相机（20080）</li>
        </ul>
        <div class="more">
            <a href="more.html"><span>显示全部品牌</span></a>
        </div>  
    </div>
<script type="text/javascript">
    $(function(){
        var $category = $("#content ul li:gt(5):not(:last)");
        $category.hide();

        var $toggleBtn = $(".more a");
        $toggleBtn.click(function(){
            if($category.is(":visible")){
                $category.hide();
                $(this).children("span").css("background","url(down.png) 0px -3px no-repeat").text("显示全部品牌");
                $("#content ul li").removeClass("light");
            }else{
                $category.show();
                $(this).children("span").css("background","url(up.png) 0px -3px no-repeat").text("精简显示品牌");
                $("#content ul li").filter(":contains('尼康'),:contains('佳能')").addClass("light");
            }
            return false;

        });
    })
</script>   
</body>
</html>

隐藏前图片：
这里写图片描述
点击展开后的图片：

注：这效果采用到的jquery方法有：
1.show(), .hide(); //对象的显示和隐藏方法
2..click(fucntion(){}); //处罚点击事件
3.text(“”); //更改标签文本
4.addClass(),removeClass(); //添加样式名和删除样式名
5.children(); //查找子元素方法
6.return false; //是点击的a标签链接失效
7.filter(“:contains(‘内容’)”) //筛选出符合条件的元素

源码下载地址：http://pan.baidu.com/s/1eQfQPfs

含笑一过

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
点击按钮显示和隐藏列表内容

点击按钮显示和隐藏列表内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击展开和隐藏</title> <link rel="stylesheet" type="text/css" href="../reset.css"> <link rel="stylesheet" typ
复制链接

扫一扫