手風琴切換效果

代碼：

CSS代碼：

.acco_box {width:400px;border:1px solid #a0b3d6; } .acco_title {line-height:26px;padding-left:10px;font-size:14px;background-color:#cadbeb;border-bottom:1px solid #beceeb; } .acco_title_on {background-color:#beceeb; } .acco_content {height:0;padding:0 10px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;overflow:hidden; }

?

HTML代碼：

<div class="acco_box"><div class="acco_title acco_title_on" lang="accoContent_1">? 一個普通的文本的段落</div><div id="accoContent_1" class="acco_content" style="height:140px;"><p>黃藥師選婿，讓郭靖和歐陽克各寫一篇作文。郭靖絞盡腦汁寫足五百字，心頭惴惴，不料歐陽克只寫了一百四十字，郭靖輕松獲勝。歐陽鋒大怒，一耳光甩在歐陽克臉上："s b！叫你天天寫微博！" </p></div><div class="acco_title" lang="accoContent_2">? 一個有個小圖的段落</div><div id="accoContent_2" class="acco_content"><p><img class="headimg" src="http://image.zhangxinxu.com/image/study/head/s50/20.jpeg" />11月24日消息，盛大旗下網站游玩網(www.uvan.com)將于11月25日正式改名為切客網，并啟動新域名www.qieke.com。這也意味著游玩網將從原來的旅游社區進一步向LBS方向轉型。 游玩網于今年8月正式公測，融入了微博功能，并提供基于位置的服務(LBS)，是典型的"Twitter+Foursquare"模式。 </p></div><div class="acco_title" lang="accoContent_3">? 純粹兩段文字</div><div id="accoContent_3" class="acco_content"><p>FlowReaer今天已經在App Store上架了，請各位未越獄的朋友到App Store免費下載。</p><p>這個應用和新版的QQ閱讀有點像，算是中文版的Flipboard應用，Flipboard支持的是Twitter，FlowReaer則支持新浪微博。</p></div> </div>

?

JS代碼：

//簡單的類/ID選擇器 var $$ = function (selector) {var cl, id, alls, arrEle = [];if (/^\./.test(selector)) {cl = selector.replace(".", "");alls = document.getElementsByTagName("*"), l = alls.length;for (var i=0; i<l; i+=1) {var name = alls[i].className, arrName = [];if (name) {arrName = name.split(" "), lName = arrName.length;for (var j=0; j<lName; j+=1) {if (arrName[j] === cl) {arrEle.push(alls[i]); }}}}} else if (/^#/.test(selector)) {id = selector.replace("#", "");var o = document.getElementById(id);if (o) {arrEle.push(o); }}return arrEle; }; //點擊方法 Array.prototype.click = function(fn) {var l = this.length;if (l) {for (var i=0; i<l; i+=1) {this[i].onclick = function() {fn.call(this);};}} }; //執行點擊 $$(".acco_title").click(function() {var rel = this.lang, cl = this.className, oOn = $$(".acco_title_on")[0], rel_on = oOn.lang;if (!/on/.test(cl) && rel && rel_on) {$$("#" + rel)[0].style.height = "140px";$$("#" + rel_on)[0].style.height = "0";this.className = "acco_title acco_title_on";oOn.className = "acco_title";} });

?

效果：

?

轉載于:https://www.cnblogs.com/Michelle20180227/p/8776338.html

總結

以上是生活随笔為你收集整理的手风琴切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。