图太糊了对不起。
能看出大概效果吧。
代码如下：
<template>
<div id="questions">
<div class="container1">
<ul class="question-container">
<li v-for="(q,index) in questions" :key="index">
<p class="fc-dgray fz-t">
Q：{{q.question}}
<span
:class="['arrow','bottom-arrow',q.showDetail?'active':'']"
@click="showHide(index)"
></span>
</p>
<div class="answer" :id="q.pid">
<p class="fc-blue fz-fo">A：{{q.answer}}</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
questions: [
{
question: "上课前需要准备什么？",
answer:
"请提前下载好PC客户端，或者iPad客户端，并做好课前预习，在课前几分钟进入教室，等待外教老师上课。"
},
{
question: "上课时出现了问题怎么办？",
answer: "您可以联系您的课程顾问，或者拨打客服热线：400-001-7878。"
}
],
act: 0
};
},
components: {
pager
},
mounted() {
this.questions = this.questions.map((v, index) => {
return { ...v, showDetail: false, pid: "itemPId" + index };
});
},
methods: {
showHide(index) {
var obj = this.questions[index];
obj.showDetail = !obj.showDetail;
setTimeout(function() {
var pid = "itemPId" + index;
var pdom = document.getElementById(pid);
if (obj.showDetail) {
pdom.style.height = pdom.scrollHeight + "px";
} else {
pdom.style.height = 0;
}
}, 1);
},
}
};
</script>
<style scoped>
.question-container {
margin-top: 83px;
}
.question-container li {
padding: 37px 40px;
border-bottom: 1px solid rgba(13, 52, 106, 0.49);
}
.question-container li p:first-child {
line-height: 22px;
}
/*箭头,默认朝右,灰色*/
.arrow:before {
content: " ";
display: inline-block;
height: 10px;
width: 10px;
border-width: 1.5px 1.5px 0 0;
border-color: #ccc;
border-style: solid;
transform: rotate(45deg);
}
/*左箭头*/
.arrow.left-arrow:before {
transform: rotate(-135deg);
}
/*上箭头*/
.arrow.top-arrow:before {
transform: rotate(-45deg);
}
/*下箭头*/
.arrow.bottom-arrow:before {
transform: rotate(135deg);
}
.bottom-arrow {
padding: 5px 10px;
float: right;
cursor: pointer;
}
.bottom-arrow:before {
border-color: #f33a16;
transition: 0.5s;
}
.bottom-arrow.active:before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
transition: transform 0.5s;
}
.answer{
box-sizing: border-box;
height: 0;
transition: height 0.5s;
overflow: hidden;
}
.answer p{
line-height: 25px;
padding: 32px 0 0 0;
}
</style>