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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery实现折叠菜单效果【推荐】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1718字，纯文字阅读大概需要3分钟。

内容图文

这是一个简单的折叠框效果实现，核心内容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实现折叠菜单效果【推荐】全部内容，希望文章能够帮你解决jquery实现折叠菜单效果【推荐】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端