快捷導(dǎo)航

jquery實(shí)現(xiàn)折疊菜單效果【推薦】

更新時(shí)間：2017年03月08日 15:20:46 作者：IT白菜哥

本文主要介紹了jquery實(shí)現(xiàn)折疊菜單效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

這是一個(gè)簡(jiǎn)單的折疊框效果實(shí)現(xiàn)，核心內(nèi)容jQ庫(kù)里的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);//默認(rèn)的背景
  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;//內(nèi)容本分默認(rèn)隱藏
  padding: 5px;
  margin: 10px 0;
  }

html代碼：使用ul li的布局本菜認(rèn)為代碼結(jié)構(gòu)更簡(jiǎn)潔清晰

 <ul class="con_ul">
  <li>
  <div class="title">
   標(biāo)題
  </div>
  <div class="con">
   內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
</div>  
  </li>
  <li>
  <div class="title">
   標(biāo)題
  </div>
  <div class="con">
   內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
</div>  
  </li>
  <li>
  <div class="title">
   標(biāo)題
  </div>
  <div class="con">
   內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
</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');//獲取當(dāng)前點(diǎn)擊對(duì)象，切換act類，達(dá)到切換背景箭頭的效果
  $(this).next().slideToggle();/獲取當(dāng)前點(diǎn)擊對(duì)象的下一個(gè)兄弟級(jí)，實(shí)現(xiàn)折疊效果切換  
  })
 </script>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: