亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery如何實現折疊菜單效果

發布時間:2021-06-25 09:27:48 來源:億速云 閱讀:231 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關jquery如何實現折疊菜單效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

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

效果圖如下:

jquery如何實現折疊菜單效果jquery如何實現折疊菜單效果

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如何實現折疊菜單效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

岑溪市| 汝州市| 靖安县| 正定县| 民县| 舒兰市| 龙海市| 临漳县| 武邑县| 贵定县| 樟树市| 桦川县| 南投县| 安庆市| 兴安盟| 庆云县| 南漳县| 清原| 太湖县| 临高县| 江都市| 普宁市| 阜康市| 沙雅县| 渭南市| 灵武市| 加查县| 阿克苏市| 台东市| 库车县| 冕宁县| 兴山县| 呼和浩特市| 大厂| 奉节县| 嫩江县| 沙雅县| 庐江县| 达尔| 屯留县| 扎赉特旗|