王雨的jquery練習01---顯示隱藏列表

時間 2019-12-04

原文原文鏈接

點擊「顯示所有」展開列表，同時其中三項變色。點擊「收起列表」便可收起列表！html

html：jquery

<!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：ide

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。