jQuery 显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
    <style>
        span{
            background: green;
        }
    </style>
</head>
<body>
<div class="box">
<ul><li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">索尼</a><i>(32515)</i></li>
    <li><a href="#">其他品牌相机</a><i>(30015)</i></li>
</ul>
    <div class="but">
        <a href="#"><span>显示全部品牌</span></a>
    </div>
</div>
<script src="Jquery/jquery-1.12.0.min.js"></script>
<script>
   var hd=$("ul li:gt(5):not(:last)");
   hd.hide();
   $(".but").click(function () {
       if(hd.is(":visible"))
       {
           hd.hide();
           $(this).find("span").css("background","green").text("显示全部品牌");
       }else{
           hd.show();
           $(this).find("span").css("background","red").text("精简显示");
       }
   })
</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页