显示全部内容OR显示部分内容

浅笑Sunshine

于 2014-02-26 13:31:04 发布

阅读量913

点赞数

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

本文链接：https://blog.csdn.net/u011686207/article/details/19974597

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="显示全部品牌.aspx.cs" Inherits="显示全部品牌" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.7.1.js" type ="text/javascript" ></script>
    <script type ="text/javascript" >
        //等待DOM加载完毕
        $(function () {
            //获得索引值大于5的品牌集合对象（除最后一条）
            var $category = $('ul li:gt(5):not(:last)');
            //以藏上面获取到的jQuery对象
            $category.hide();
            //获取‘显示全部品牌’按钮
            var $toggleBth = $('div.showmore>a');
            //给按钮添加click事件
            $toggleBth.click(function () {
                //如果元素显示
                if ($category.is(":visible")) {
                    //隐藏$category
                    $category.hide();
                    //改变背景图片和文本
                    $(this).find('span')
                    //.css("background", "url(img/down.gif)no-repeat 0 0")
                    .text("显示全部品牌");
                    //去掉高亮样式
                    $('ul li').removeClass("promoted");
                }
                else {
                    //显示$category
                    $category.show();
                    //改变背景图片和文本
                    $(this).find('span')
                    //.css("background", "url(img/up.gif)no-repeat 0 0")
                    .text("精简显示品牌");
                    //添加高亮样式
                    $('ul li').filter(":contains('佳能').:contains('尼康').:contains('奥林巴斯')")
                    .addClass("promoted");
                }
                //超链接不跳转
                return false;
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class=" SubCategoryBox">
        <ul>
            <li><a href="#" >佳能</a><i>(30440)</i> </li>
            <li><a href="#" >索尼</a><i>(27220)</i> </li>
            <li><a href="#" >三星</a><i>(20808)</i> </li>
            <li><a href="#" >尼康</a><i>(17821)</i> </li>
            <li><a href="#" >松下</a><i>(12289)</i> </li>
            <li><a href="#" >卡西欧</a><i>(8242)</i> </li>
            <li><a href="#" >富士</a><i>(14894)</i> </li>
            <li><a href="#" >柯达</a><i>(9520)</i> </li>
            <li><a href="#" >宾得</a><i>(2195)</i> </li>
            <li><a href="#" >理光</a><i>(4114)</i> </li>
            <li><a href="#" >奥林巴斯</a><i>(12205)</i> </li>
            <li><a href="#" >明基</a><i>(1466)</i> </li>
            <li><a href="#" >爱国者</a><i>(3091)</i> </li>
            <li><a href="#" >其他品牌相机</a><i>(7275)</i> </li>

        </ul>
    <div class="showmore">
        <a href ="more.html"><span>显示全部品牌</span></a>

    </div>
    </div>
    </form>
</body>
</html>

浅笑Sunshine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
显示全部内容OR显示部分内容

效果图： http://www.w3.org/1999/xhtml"> //等待DOM加载完毕 $(function () { //获得索引值大于5的品牌集合对象（除最后一条） var $category = $('ul li:gt(5):n
复制链接

扫一扫

专栏目录