标签：target color 展开 background 收起 isshowmorebasic event size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/style.css" rel="stylesheet" /> -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<title>展开</title>
<style>
.showmore {
text-align: center;
margin-bottom: 30px;
width: 100%;
margin-top: 10px;
}
.showmore span {
background: url(../img/zhan.png) 420px center no-repeat;
background-size: 38px;
background-color: #f2f2f2;
color: #0A75CE;
font-size: 14px;
display: inline-block;
cursor: pointer;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.showmore .exhibition {
background: url(../img/shou.png) 430px center no-repeat;
background-size: 22px;
background-color: #f2f2f2;
color: #0A75CE;
padding: 7px -10px 7px 17px;
font-size: 14px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body style="background-color:#f7f7f7;font-family: 'PingFang SC';">
<div id="api">
<div class="bigBox" >
<div class="interval"></div>
<div class="contentList">
<div class="leftasidebox">
<h1 class="menutit menutitts"><a id="top1"><span>基础信息</span></a></h1>
<div class="extendinfo">
<h2 class="secondmenutit secondmenutit_top">1、基础信息</h2>
</div>
<div class="extendinfo" v-if="isshowmorebasic">
<h2 class="secondmenutit">2、办理结果</h2>
</div>
<div class="extendinfo" v-if="isshowmorebasic">
<h2 class="secondmenutit">3、收费信息</h2>
</div>
<div class="showmore" v-on:click="showdetail('basic',$event)">
<span>展开全部</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var api = new Vue({
el: '#api',
data: {
isshowmorebasic: false,//是否显示更多基础信息
},
methods: {
showdetail: function (type, event) {
if (type == 'basic') {
if (this.isshowmorebasic == false) {
$(event.target).html("收起");
$(event.target).addClass("exhibition");
this.isshowmorebasic = true;
} else {
$(event.target).html("展开");
$(event.target).removeClass("exhibition");
this.isshowmorebasic = false;
}
}
},
},
});
</script>
</html>
标签：target,color,展开,background,收起,isshowmorebasic,event,size 来源： https://blog.csdn.net/weixin_41813243/article/details/111873153
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。