第一課關于側邊欄下拉手風琴的實現

番茄西紅柿發布于2019-04-23 11:52 / 2110人閱讀

摘要：一主要知識點布局，變換，事件觸發二屬性記憶規則子元素會繼承父元素的布局屬性。盒子的實際寬度設置的和不會影響實際寬度定位屬性，用于上的角形的實現，此次小角形實現需要用到父相對位置，子絕對位置。

一、主要知識點：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側邊欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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