第一课关于侧边栏下拉手风琴的实现

番茄西红柿发布于2019-04-23 11:52 / 2111人阅读

摘要：一主要知识点布局，变换，事件触发二属性记忆规则子元素会继承父元素的布局属性。盒子的实际宽度设置的和不会影响实际宽度定位属性，用于上的角形的实现，此次小角形实现需要用到父相对位置，子绝对位置。

一、主要知识点：html布局，css变换，js事件触发

二.CSS属性记忆：

CSS规则：子元素会继承父元素的布局属性。不专门改变子元素的属性，其会跟随父元素。

功能	语句
margin	外边距
Padding	内边距
关于文本的水平居中为：	text-align: center;
关于文本的垂直居中：	使行高等于背景元素的高度,一般用于单行固定,不易维护，		Iine-height:元素高;
	Padding设置内边距，使其自动撑开，建议使用这个		padding: 15px 0;
怪异魔盒	box-sizing: border-box; 可以保证元素大小不会随着padding与margin变化。只会向内占用自己的空间。 CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型区别： content-box：padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的width+padding+border border-box：padding和border被包含在定义的width和height之内。盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
Position	定位属性，用于h3上的3角形的实现，此次小3角形实现需要用到：（父：position： relative；相对位置），（子：position： absolute;绝对位置）。
transform	旋转属性 transform: rotate(0deg)
transition	动画过渡效果，添加上此属性，样式变换会有渐变效果 transition: 1s;
.classname:hover{ }	鼠标选中例子：.wrap:hover//鼠标选中 { background-color: #67c33f;//鼠标选中后变色 cursor: pointer; //鼠标显示形状为小手 }
overflow	溢出属性，用于div调整高度或宽度时溢出部分的属性，例子：overflow: hidden; 溢出隐藏
border-bottom: 1px solid #42495d;		下边框为1px ，颜色是#42495d
属性都是选定类名，在 css样式中使用例子： .hide{ overflow: hidden; height: 0; transition: 1s; }

三、javascript元素的获取，与事件的触发，自定义原素

注意：js是自上向下执行的程序，要注意用户触发事件对其的影响，比如for循环，会跳过用户触发事件执行循环，所以要用自定义属性下表。

源码：

  1 doctype html>
  2 
  3 <html>
  4     <head>
  5         <meta charset=utf-8>
  6         <meta name="keywords" content="侧边栏下拉">
  7         <meta name="description" content="侧边栏下拉手风琴">
  8         <title>第一课title>
  9         <style>
 10             *{/*通配符不建议使用*/
 11                 margin: 0;
 12                 padding: 0;
 13             }
 14             html,body{
 15                 height: 100%;
 16             }
 17             .wrap{
 18                 width: 260px;
 19                 height: 100%;
 20                 background-color:#363a45;
 21                 text-align: center;
 22                 color: #fff;
 23             }
 24             .head{
 25             
 26                 padding: 20px 0;
 27                 background-color: #44495a;
 28                 
 29                 font-size: 20px;
 30             }
 31             .nav{
 32                 width: 250px;
 33                 margin: 10px 5px;
 34             }
 35             .nav-list{
 36                 margin-bottom: 5px;
 37             }
 38             .nav-list h3{
 39                 position: relative;/*相对位置*/
 40                 padding: 15px 0;
 41                 background-color: #3889d4;
 42 
 43                 transition: 1s;/*动画过渡效果*/
 44 
 45                 font-size: 14px;
 46                 
 47             }
 48             .nav-list h3.on{/*给h3添加类名on用于效果变化提高性能 */
 49                 background-color: #393c4a;
 50             }
 51             .nav-list i{
 52                 position: absolute;/*绝对位置*/
 53                 top: 15px;   /*位置*/
 54                 right: 10px; /*位置*/
 55 
 56                 border: 8px solid transparent;/*transparent 全透明*/ /*画出3角形1*/
 57                 border-left-color: #fff;/*左边白色*/  /*画出3角形2*/
 58 
 59                 transform-origin: 1px 8px;/*旋转基点（x，y）*/
 60                 transform: rotate(0deg);/*旋转角度*/
 61 
 62                 transition: 1s;/*动画过渡效果*/
 63                 
 64             }
 65             .nav-list i.on{
 66                 transform: rotate(90deg);/*旋转角度*/
 67             }
 68             .hide{
 69                 overflow: hidden;/*隐藏溢出部分*/
 70                 height: 0;
 71                 transition: 1s;/*动画过渡效果*/
 72             }
 73             .hide h5{
 74                 padding: 10px 0;
 75                 ovewflow
 76                 background-color: #282c3a;
 77                 border-bottom:1px solid #42495d;
 78 
 79             }
 80             
 81         style>
 82     head>
 83     <body>
 84         <div class="wrap">
 85             <div class="head">国内各地景点div>
 86             <div class="nav">
 87                 <ul>
 88                     <li class="nav-list">
 89                         <h3>北京的景点
 90                             <i>i>
 91                         h3>
 92                         <div class="hide">
 93                         <h5>故宫h5>
 94                         <h5>天坛h5>
 95                         <h5>颐和园h5>
 96                         <h5>长城h5>
 97                         <h5>天坛公园h5>
 98                         <h5>人民大会堂h5>
 99                         div>
100                     li>
101                     <li class="nav-list">
102                         <h3>南京的景点
103                             <i>i>
104                         h3>
105                         <div class="hide">
106                         <h5>故宫h5>
107                         <h5>天坛h5>
108                         <h5>颐和园h5>
109                         <h5>长城h5>
110                         <h5>天坛公园h5>
111                         <h5>人民大会堂h5>
112                         div>
113                     li>
114                 ul>
115             div>
116         div>
117         
118         <script>
119             var oList=document.querySelectorAll(.nav-list h3),
120             oHide=document.querySelectorAll(.hide),
121             oIcon=document.querySelectorAll(.nav-list i);//获取css中的元素
122     
123 
124         /*oList[0].onclick=function(){//点击事件->执行函数
125                 oHide[0].style.height=245px;//改变hide高度
126                 oList[0].style.backgroundColor= #393c4a,//改变颜色
127                 oIcon[0].style.transform=rotate(90deg);//修改角度   注释原因使用添加类名on代替在js中直接调用属性
128                                                                          ，其变化都在css中，就js只是添加一个类名这样就提高了性能
129 
130                 oHide[0].style.height=245px;//改变hide高度
131                 oList[0].className= on,//改变颜色
132                 oIcon[0].className= on;//修改角度
133 
134             }*/
135             
136 
137             lastIdnex=0;//上一次点击下标
138             
139             for(var i=0;i<oList.length;i++)
140             {
141 
142                 oList[i].index=i;//自定义属性保存下标
143 
144                 oList[i].isClick=false;//没有被点击
145             
146                 oList[i].onclick=function() {//点击事件->执行函数
147                     //清除上一次下标
148                     oHide[lastIdnex].style.height=0;//改变hide高度
149                     oList[lastIdnex].className= ;//改变颜色
150                     oIcon[lastIdnex].className= ;//修改角度
151 
152                     if(this.isClick){//被点了
153                         this.isClick=false;//开关变化
154                     }
155                     else
156                     {
157                         //设置当前下标
158                         oHide[this.index].style.height=245px;//改变hide高度
159                         oList[this.index].className= on;//改变颜色
160                         oIcon[this.index].className= on;//修改角度
161 
162                         oList[lastIdnex].isClick=false;//清除上一次开关
163                         oList[this.index].isClick=true;//开关变化
164                         lastIdnex=this.index;//保存当前下标
165                         
166                     }
167                 }
168 
169 
170             }
171 
172                 
173         script>
174         
175     <body>
176 
177 html>

View Code

刚开始使用博客园，还有好多不会用，只是单纯的记录自己记忆到的知识点，可能有许多不恰当的地方。

GPU云服务器云服务器动态侧边栏显示隐藏侧边栏 html侧边栏 jquery侧边栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1277.html

侧边栏手风琴效果

html {{item.name}}{{item.show}} {{a}} js changeli (index, item) { // 循环所有列表，去掉展开的item this.headerData.forEach(i => { if (i.show !== this.headerData[i...

Pandaaa 2019-08-23 12:56 评论0 收藏0
一步步带你做vue后台管理框架(一)——介绍框架

摘要：组件已经有了，我们的框架还有哪些特性呢自适应自适应现在很多框架都没有自适应功能，而很多使用场景也在手机上会有，这也是后台管理框架诞生的原因之一。系列教程《一步步带你做vue后台管理框架》第一课 github地址：vue-framework-wz线上体验地址：立即体验《一步步带你做vue后台管理框架》第一课：介绍框架《一步步带你做vue后台管理框架》第二课：上手使用《一步步带你做v...

XiNGRZ 2019-08-21 16:19 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

摘要：规定动画的时长。注意子菜单要用隐藏，在显示的时候再设置。如果不加，实际上子菜单，以及子菜单下面的一直在页面上，如果鼠标移上去子菜单，以及子菜单下面的。 1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 评论0 收藏0
感受javascript之美系列教程第一课 基础知识

摘要：屌丝和女神约好一起喝咖啡，聊天很愉快，分开不久手机收到女神发来的一个信息西女一个西女，你的嘴巴和手好白，你的嘴巴和手好白，你的嘴巴和手好白。屌丝看到了这句话顿时懵逼了。其实如果没有编辑器，你就相当于女神，电脑就相当于屌丝，他看不懂你写的。 javascript,当今最流行的开发语言之一，既有它简单易学的一面，又有它不同于其它语言奇怪的一面。我们一起通过感受javascript之美这套课...

callmewhy 2019-08-20 15:50 评论0 收藏0