您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果”這篇文章吧。
HTML部分:
<div class="box"> <!-- 內(nèi)容--> <ul class="inner"> <li class="inner_title">綠色校園<span></span></li> <ol class="inner_style"> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> </ol> <li class="inner_title">綠色校園<span></span></li> <ol class="inner_style"> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> </ol> <li class="inner_title">綠色校園<span></span></li> <ol class="inner_style"> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> <li>籃球場</li> </ol> </ul> </div>
CSS部分:
<style> body{ background: #dddddd; } .inner{ background: #fff; width: 100%; overflow: hidden; list-style: none; margin: 0; padding: 0; } .inner .inner_title{ background-color: #fff; width: 100%; padding: 0 2.5%; border-bottom: 1px solid #efefef; color: #343434; height: 40px; line-height: 40px; font-size: 16px; position: relative; } .inner .inner_title span{ position: absolute; width: 20px; height: 20px; top: 50%; margin-top: -10px; right: 6%; background: url("images/arow_left.png") no-repeat center; } .inner .inner_title.active{ color: #4db780; } .inner .inner_title.active span{ background: url("images/arow_down.png") no-repeat center; } /*彈出的二級(jí)分類處理*/ .inner .inner_style{ margin: 0; list-style: none; width: 100%; background-color: #efefef; overflow: hidden; padding: 15px 3%; } .inner .inner_style li{ float: left; color: #333; font-size: 14px; width: 21%; text-align: center; line-height: 30px; margin-right: 5%; } </style>
js部分(記得引入jQuery):
<script> /**處理折疊效果**/ (function ($) { $.fn.Fold = function (options) { //默認(rèn)參數(shù)設(shè)置 var settings = { speed: 300 //折疊速度(值越大越慢) } //不為空則合并參數(shù) if (options) $.extend(settings, options); //遵循鏈?zhǔn)皆瓌t return this.each(function () { //為每個(gè)li元素綁定點(diǎn)擊事件 $("> li", this).each(function () { $(this).bind("click", function () { //單擊之前先判斷當(dāng)前菜單是否折疊 if($(this).hasClass('active')){//折疊狀態(tài) $(".inner ol").slideUp('500');//使用slideup()折疊其他選項(xiàng) $(this).removeClass('active');//移除選中樣式 }else{//打開狀態(tài) $(this).siblings('li').removeClass('active'); $(".inner ol").slideUp('500');//使用slideup()折疊其他選項(xiàng) $(this).addClass('active')//添加選中樣式 $(this).next("ol").slideToggle(settings.speed); } }); }); //默認(rèn)折疊 $("> ol", this).hide(); }); } })(jQuery); $(".inner").Fold();//調(diào)用 </script>
效果如下:
以上是“slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。