jquery怎么實現折疊菜單效果

今天小編給大家分享一下jquery怎么實現折疊菜單效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

這是一個簡單的折疊框效果實現，核心內容jQ庫里的slideToggle()方法

效果圖如下：

css代碼：

  .con_ul{

  padding: 0;
  margin: 0;
  overflow: auto;
  }
  .con_ul li{
  list-style: none;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #CCCCCC;
  }
  .con_ul li .title{
  padding-right: 20px;
  background-image: url(images/drop_1fcaf417.png);//默認的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con_ul li .title.act{
  padding-right: 20px;
  background-image: url(images/top.png);//展開后的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con{
  background-color: #F4F4F4;
  display: none;//內容本分默認隱藏
  padding: 5px;
  margin: 10px 0;
  }

html代碼：使用ul li的布局本菜認為代碼結構更簡潔清晰

 <ul class="con_ul">
  <li>
  <div class="title">
   標題
  </div>
  <div class="con">
   內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>  
  </li>
  <li>
  <div class="title">
   標題
  </div>
  <div class="con">
   內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>  
  </li>
  <li>
  <div class="title">
   標題
  </div>
  <div class="con">
   內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>  
  </li>
 </ul>

javascript代碼：

 <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
 <script>
  $('.con_ul li .title').click(function(){    
  $(this).toggleClass('act');//獲取當前點擊對象，切換act類，達到切換背景箭頭的效果
  $(this).next().slideToggle();/獲取當前點擊對象的下一個兄弟級，實現折疊效果切換  
  })
 </script>

以上就是“jquery怎么實現折疊菜單效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。