```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td,th{border: 1px solid blue;}
td{width: 100px;}
#pi{display: none;}
.vs{visibility: hidden;}
</style>
</head>
<body>
<span>
<div>华为(30440) vivo(20310) 小米(54512)</div>
<div>联想(54454) 三星(15215) 索尼(54615)</div>
<div>佳能(51551) 富士(15151) 柯达(54554)</div>
<a href="#" id="p1">隐藏</a>
<div>卡西欧(54551) 尼康(41545) 吉他(45455)</div>
<div>奥林巴斯(54545) 宾得(55515) 索尼(44555)</div>
<div>苹果(545655) 其他品牌相机(55166)</div>
</span>
<script src="jquery-3.6.0.js"></script>
<script>
$(function(){
var $categary=$('ul li:gt(5):not(:last)');
$categary.hide();
var $toggleBtn=$('div.showmore>a');
$toggleBtn.click(function(){
if($categary.is(":visiable")){
$categary.hide();
$(this).find('span')
.text('显示全部品牌');
}else{
$categary.show();
$(this).find('span')
.text("精简显示品牌");
}
return false;
})
})
</script>
</body>
</html>
谁帮我看看怎么做,来个人,好的必采纳,js的
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 你好!机器人 2021-11-13 18:11关注
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,td,th{border: 1px solid blue;} td{width: 100px;} #pi{display: none;} .vs{visibility: hidden;} .main{height:60px; overflow: hidden;} .main.active{height:auto;} </style> </head> <body> <div class="main"> <div>华为(30440) vivo(20310) 小米(54512)</div> <div>联想(54454) 三星(15215) 索尼(54615)</div> <div>佳能(51551) 富士(15151) 柯达(54554)</div> <div>卡西欧(54551) 尼康(41545) 吉他(45455)</div> <div>奥林巴斯(54545) 宾得(55515) 索尼(44555)</div> <div>苹果(545655) 其他品牌相机(55166)</div> </div> <a href="javascript:;" id="p1">显示全部品牌</a> <script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <script> $(function(){ $('#p1').click(function(){ if($('.main').hasClass('active')){ $('.main').removeClass('active') $(this).text('显示全部品牌') }else{ $('.main').addClass('active') $(this).text('精简显示品牌') } }) }) </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 matlab代码代写,需写出详细代码,代价私
- ¥15 ROS系统搭建请教(跨境电商用途)
- ¥15 AIC3204的示例代码有吗,想用AIC3204测量血氧,找不到相关的代码。
- ¥20 CST怎么把天线放在座椅环境中并仿真
- ¥15 任务A:大数据平台搭建(容器环境)怎么做呢?
- ¥15 YOLOv8obb获取边框坐标时报错AttributeError: 'NoneType' object has no attribute 'xywhr'
- ¥15 r语言神经网络自变量重要性分析
- ¥15 基于双目测规则物体尺寸
- ¥15 wegame打不开英雄联盟
- ¥15 公司的电脑,win10系统自带远程协助,访问家里个人电脑,提示出现内部错误,各种常规的设置都已经尝试,感觉公司对此功能进行了限制(我们是集团公司)