网站建设资讯

NEWS

网站建设资讯

jquery如何实现折叠菜单效果

这篇文章将为大家详细讲解有关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的布局本菜认为代码结构更简洁清晰

 
  
  •       标题   
  •       内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            
  •       标题   
  •       内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            
  •       标题          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容      
  •  

    javascript代码:

     
     

    关于“jquery如何实现折叠菜单效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    标题名称:jquery如何实现折叠菜单效果
    链接分享:http://njwzjz.com/article/pihgjg.html

    其他资讯