這篇文章主要為大家展示了“slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果”這篇文章吧。

站在用戶的角度思考問題，與客戶深入溝通，找到興安盟烏蘭浩特網(wǎng)站設(shè)計(jì)與興安盟烏蘭浩特網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋興安盟烏蘭浩特地區(qū)。

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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：slideToggle+slideup如何實(shí)現(xiàn)手機(jī)端折疊菜單效果
新聞來源：http://www.yijiale78.com/article22/ihogjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、響應(yīng)式網(wǎng)站、全網(wǎng)營銷推廣、ChatGPT、網(wǎng)頁設(shè)計(jì)公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)