王雨的jquery练习01---显示隐藏列表

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_30527143

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/blogwy/p/6902013.html

版权

点击“显示全部”展开列表，同时其中三项变色。点击“收起列表”即可收起列表！

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/main.js"></script>
    <style>
        .promoted{
            color: red;
        }
    </style>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">苹果</a><i>(2356) </i></li>
        <li><a href="">华为</a><i>(2355) </i></li>
        <li><a href="">小米</a><i>(2354) </i></li>
        <li><a href="">联想</a><i>(2353) </i></li>
        <li><a href="">努比亚</a><i>(2352) </i></li>
        <li><a href="">魅族</a><i>(2351) </i></li>
        <li><a href="">MOTO</a><i>(2350) </i></li>
        <li><a href="">360</a><i>(2310) </i></li>
        <li><a href="">一加</a><i>(2311) </i></li>
        <li><a href="">中兴</a><i>(2312) </i></li>
        <li><a href="">朵唯</a><i>(2313) </i></li>
        <li><a href="">索尼</a><i>(2314) </i></li>
        <li><a href="">三星</a><i>(2315) </i></li>
        <li><a href="">松下</a><i>(2316) </i></li>
        <li><a href="">富士通</a><i>(2317) </i></li>
        <li><a href="">华硕</a><i>(2318) </i></li>
        <li><a href="">荣耀</a><i>(2319) </i></li>
        <li><a href="">其他品牌</a><i>(2320) </i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部</span></a>
    </div>
</div>
</body>
</html>

js：

/**
 * Created by wangyu on 2017-05-24.
 */
//实现显示隐藏部分内容
$(function () {
    //获取第七个到倒数第二个li，共11个li
    var $category = $("ul li:gt(5):not(:last)");
    //隐藏这11个li
    $category.hide();
    //获取class为showmore的div下面的a标签，也就是 显示全部
    var $toggleBtn = $("div.showmore > a");
    //给显示全部添加点击事件
    $toggleBtn.click(function () {
        //判断li是否显示，如果显示并隐藏
        if ($category.is(":visible")){
            $category.hide();
            //把span里面的文本替换成显示全部，并移除a标签的class属性
            $(this).find("span").text("显示全部");
            $("ul li a").removeClass("promoted")
        }else {
            //如果隐藏了，就显示li
            $category.show();
            //更改span文本为收起列表
            $(this).find("span").text("收起列表");
            //获取包含苹果 三星 华为的a标签，并添加class为promoted
            $("ul li a").filter(":contains(苹果),:contains(三星),:contains(华为)").addClass("promoted");
        }
        //保证 <a href="more.html"><span>显示全部</span></a> 超链接不跳转
        return false;
    })
})