重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://cqcxhl.com/article/pihgjg.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP