立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › jq淘宝品牌 显示更多 收起功能的练习

赞

评论

收藏

[jQuery] jq淘宝品牌 显示更多 收起功能的练习

开发技术 开发技术 发布于：2021-07-10 14:49 | 阅读数：320 | 评论：0

　　<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
              *{
    margin:0;
    padding:0;
    border-style:none;
    list-style:none;}
    #outer{
    margin:20px auto;
    border:solid 1px black;
    width:600px;
   }
   
   li{
   padding:6px 0;
   float:left;
   width:200px;
   margin:0 auto;
   text-align:center;}
   p{
   clear:both;
   border:solid 1px;
   text-align:center;
   width:160px;
   margin:0 auto;
   cursor:pointer;
   }
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
 
    <div id="outer">
     <ul>
         <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>佳能</li>
            <li>其他品牌</li>
        </ul>
        <p id="hide-show">隐藏所有内容</p>
        <label for="hide-show"></label>
    </div>


   
    <script>
$(document).ready(function(e) {
            $("#hide-show").click(function(){
//改变按键的文字
console.log($("#hide-show").html());
var showStage=$("#hide-show").html();
if(showStage.match("隐藏")=="隐藏"){
$("#hide-show").html("显示所有内容");
}else{
$("#hide-show").html("隐藏所有内容");
}
//实现功能
$("li:gt(2):not(:last)").slideToggle(500);
});
        });
    </script>
</body>
</html>

　　
关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
1537 经验
1487 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2