這篇文章將為大家詳細(xì)講解有關(guān)jquery如何實(shí)現(xiàn)折疊菜單效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、徐水網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

這是一個(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);//展開(kāi)后的背景
  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)潔清晰

 
  

  
   標(biāo)題