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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js实现折叠效果 # jquery实现折叠菜单 # jquery折叠效果 # js实现选项卡内容切换以及折叠和展开效果【推荐】 # Javascript实现代码折叠功能 # js无限级折叠菜单精简版 # JSON无限折叠菜单编写实例 # js 全兼容可高亮二级缓冲折叠菜单 # 原生Js与jquery的多组处理 # 仅展开一个区块的折叠效果 # js实现简单折叠、展开菜单的方法 # javascript仿qq界面的折叠菜单实现代码 # Js操作树节点自动折叠展开的几种方法 # JS+CSS实现的简单折叠展开多级菜单效果 # 这是一个 # 库里 # list # li # margin # padding # auto # overflow # CCCCCC # title # solid # px # border # bottom # con_ul # strong # jQ # slideToggle # span # style

返回目录在线咨询

上一篇：Python使用互信息筛选特征的建模策略与技术要点解析【教学】
下一篇：网站管理员应当如何定期进行安全审计与漏洞检测？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jquery实现折叠菜单效果【推荐】

您的项目需求