支援響應式手機端的JS手風琴摺疊導航選單特效（調整）
阿新 • • 發佈：2018-12-19
這個是網上提供的效果，一開始覺得效果不錯，可以使用一下，但是真正用到專案上發現很多問題，於是自己進行了一些調整，這樣可以相容顯示在手機，且不會有溢位這些情況，先上改過的效果圖（item2和item4為展開狀態）：
看到這覺得也就是改了字型居中和顏色配色，其實重點修改的是溢位問題，修改後的bellows-theme.css如下：
.bellows { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bellows__header { position: relative; padding: 15px 20px; border: 1px solid #0087e7; border-width: 0 0 1px; background: #0097ff; //原色#3498db color: white; -webkit-tap-highlight-color: transparent; } .bellows__header:active { background: #0087e7; } .bellows__header::before, .bellows__header::after { content: ''; position: absolute; top: 50%; right: 20px; z-index: 2; display: block; width: 16px; height: 4px; margin-top: -2px; background: white; pointer-events: none; -webkit-transition: -webkit-transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; } .bellows__header::before { content: ''; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .bellows__header::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .bellows__item.bellows--is-open > .bellows__header::before, .bellows__item.bellows--is-opening > .bellows__header::before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .bellows__item.bellows--is-open > .bellows__header::after, .bellows__item.bellows--is-opening > .bellows__header::after { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .bellows__item:last-child > .bellows__header { border-bottom: 0; } .bellows__header h1,.bellows__header h2,.bellows__header h3,.bellows__header h4 { margin: 0; color:white; text-align:center; } //=====溢位螢幕問題===== .bellows__content { padding: 20px; border: 1px solid #ecf0f1; height: auto; overflow: hidden; max-height:50000em; -webkit-transition: max-height 0.5s; transition: max-height 0.5s; } @media screen and (min-width: 48em) { .bellows__content { max-height: 50em; -webkit-transition: max-height 0.5s; transition: max-height 0.5s; } } //======================= .bellows__content .bellows { margin-top: 20px; }
我這裡使用的是通過js動態生成的內容，html程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <meta http-equiv="Content-Type" content="text/html;" /> <meta name="keywords" content="手風琴特效,JS摺疊選單,手機端導航選單,jQuery摺疊選單" /> <meta name="description" content="此特效是支援手機端的可摺疊導航選單特效程式碼免費下載特效" /> <title>支援響應式手機端的JS手風琴摺疊導航選單特效</title> <link rel="stylesheet" href="/static/expandAndCollapse/css/bellows-theme.css"/> <link rel="stylesheet" href="/static/expandAndCollapse/css/bellows.css"/> <style> table{font: 16px/1.5 \5B8B\4F53;} </style> </head> <body> <!-- 程式碼 開始 --> <div class="bellows" id = "contentDiv"> <div id = "basicDiv"> 支援響應式手機端的JS手風琴摺疊導航選單特效 </div> </div> <script src="/static/js/jquery-1.11.1.min.js"></script> <script src="/static/expandAndCollapse/js/velocity.min.js"></script> <!-- Include bellows.js --> <script src="/static/expandAndCollapse/js/bellows.min.js"></script> <script type="text/javascript"> /*<![CDATA[ */ showInfo(); function showInfo(){ var jsonStr = LWFBHTDATA.replace(/\n/g, ""); var infoData = $.parseJSON(jsonStr); var infoBasic = getFormatInfoBasic(infoData); for(var i = 4 ; i > 0 ; i--){ var info = ""; info = '<div class="bellows__item"><div class="bellows__header"><h3>item'+i+'</h3></div>'; info += '<div class="bellows__content" id = otherDiv"'+(i-1)+'">'+infoBasic+'</div></div>'; $("#basicDiv").after(info); } $('.bellows').bellows({ singleItemOpen: false, easing: 'ease-in-out', duration: 60 }); } //資訊顯示 function getFormatInfoBasic(infoData){ t = ""; t += '<table id ="basicTable" class = "set-table basic" align="left" style = "border:none">'; for (var j = 1; j < 9; j++) { var label = "label"+j; var value = "value"+j; t += "<tr>"; //左邊項 t += '<td align="left">'+label +'：</td>'; //右邊項 t += '<td align="left">'+value+'</td>'; t += "</tr>" } t += "</table>"; return t; } /*]]>*/ </script> </body> </html>