jQuery 显示隐藏

来源：互联网发布：手机扫描编辑软件编辑：程序博客网时间：2024/06/07 22:33
<!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>
阅读全文
0 0