老师，想知道这里的展开更多是怎么做的呢？
内容过多时想做成展开、收起，一般是前端还是后端做呢？
前端怎么做？思考了也写了没写出来
前端写的话一般用插件吗？还是jquery?用原生的js写的话 原理是什么呢？
正在回答
同学你好，这里是因为，虽然不隐藏了，但是高度还是没有改变。建议：可以把高度设置为auto，由文字撑开。例：
另，关于引入jquery文件，可以参考如下：
1、安装jquery依赖
npm install jquery --save
2、修改两处配置文件，
3、注意，修改过配置文件之后，需要重新启动代码。
希望能帮助到你，欢迎采纳。
祝学习愉快！
<template>
<div class="detail-page">
<div class="video">
<video src="http://v3.mukewang.com/shizhan/59f8498ae420e5be578b459b/H.mp4" controls="controls"></video>
<router-link to="/">
<div class="video-back"><</div>
</router-link>
</div>
<div class="unfold">
<h2>iOS基础教程之摄像头—Camera摄像头</h2>
<p id="content">从实例出发介绍我们的Camera,可以实现Camera属性检测，照片拍摄，视频录制，图片展示，录制视频从实例出发介绍我们的Camera,可以实现Camera属性检测，照片拍摄，视频录制，图片展示，录制视频从实例出发介绍我们的Camera,可以实现Camera属性检测，照片拍摄，视频录制，图片展示，录制视频</p>
</div>
<div class="btn" @click="unfold"><img src="../assets/arrow.png"/></div>
<ul class="question">
<li v-for="item in arrQuestion">
<h2>{{item.question}}</h2>
<p v-html="item.answer"></p>
</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default{
data(){
return{
arrQuestion:[]
}
},
mounted(){
this.arrQuestion=[{
question:'课程须知',
answer:'本课程适合客户端产品经理，研发人员以及对iOS新特性感兴趣的人群'
},{
question:'老师告诉你能学到什么？',
answer:`(1)数码相机相关的所有API<br/>
(2)利用Camera实现相机的各种属性检测<br/>
(3)利用Camera实现相机的各种属性检测<br/>
(4)利用Camera实现相机的各种属性检测<br/>`
}]
},
methods:{
unfold(){
document.getElementById('content').style.overflow='visible';
}
}
};
</script>
<style scoped>
.unfold{
width:335px;
height:74px;
padding:24px 20px 0 20px;
}
.unfold h2{
font-size:16px;
color:#2b333b;
}
.unfold p{
font-size:14px;
height:40px;
color:#71777d;
margin-top:16px;
overflow:hidden;
}
.btn{
position:relative;
width:100%;
height:34px;
}
.btn img{
width:10px;
position: absolute;
left:50%;
margin-left:-5px;
top:10px;
}
.question{
width:335px;
height:192px;
padding:24px 20px;
}
.question h2{
font-size:16px;
color:#2b333b;
}
.question p{
font-size:14px;
color:#71777d;
margin-top:16px;
}
.video{
position: relative;
height: 3.82rem;
}
.video video{
width: 100%;
height: 100%;
}
.video-back{
position: absolute;
top: 0.42rem;
left: 0.32rem;
text-align: center;
color: #fff;
font-size: 0.36rem;
line-height: 0.64rem;
border-radius: 3px;
width: 0.64rem;
height: 0.64rem;
background: rgba(0,0,0,.5);
}
</style>
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星