jQuery导航条在项目中的应用(2)

日期：2020-06-06 栏目：程序人生浏览：次

$(".clsBot > a").click(function () {
                if ($(".clsBot > a").text() == "简化") { //如果内容为'简化'字样
                    $("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素
                    $(".clsBot > a").text("更多");
                }
                else {
                    $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式
                    $(".clsBot > a").text("简化");
                }
            });
        });
    </script>
</head>
<body>
    <div>
        <div>
            <h3>
                图书分类</h3>
            <span>
                <img src="https://www.linuxidc.com/Images/a1.gif" alt="" /></span>
        </div>
        <div>
            <ul>
                <li><a href="#">小说</a><i>(1110)</i></li>
                <li><a href="#">文艺</a><i>(230)</i></li>
                <li><a href="#">青春</a><i>(1430)</i></li>
                <li><a href="#">少儿</a><i>(1560)</i></li>
                <li><a href="#">生活</a><i>(870)</i></li>
                <li><a href="#">社科</a><i>(1460)</i></li>
                <li><a href="#">管理</a><i>(1450)</i></li>
                <li><a href="#">计算机</a><i>(1780)</i></li>
                <li><a href="#">教育</a><i>(930)</i></li>
                <li><a href="#">工具书</a><i>(3450)</i></li>
                <li><a href="#">引进版</a><i>(980)</i></li>
                <li><a href="#">其他类</a><i>(3220)</i></li>
            </ul>
            <div>
                <a href="#">简化</a>
                <img src="https://www.linuxidc.com/Images/a5.gif" alt="" />
            </div>
        </div>
    </div>
</body>
</html>

转载注明出处：http://www.heiqu.com/ppssy.html

jQuery导航条在项目中的应用(2)

相关推荐