jquery实现下拉菜单的手风琴效果


Posted in jQuery onJuly 23, 2017

本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码,供大家参考,具体内容如下

html代码

<div class="site-nav">
 <ul class="site-accordion">
  <li>
   <div class="tab-head">学科领域</div>
   <ul class="tabs-list">
    <li>机械电子</li>
    <li>生物工程</li>
    <li>能源环保</li>
    <li>化学化工</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">省份地区</div>
   <ul class="tabs-list">
    <li>陕西省</li>
    <li>江苏省</li>
    <li>山东省</li>
    <li>河南省</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">经费范围</div>
   <ul class="tabs-list">
    <li>50万~100万</li>
    <li>100万~200万</li>
    <li>200万~500万</li>
    <li>500万以上</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">需求状态</div>
   <ul class="tabs-list">
    <li>状态1</li>
    <li>状态2</li>

   </ul>
  </li>

 </ul>
</div>

css代码

.site-accordion>li{
 margin-top: 13px;
}
.site-accordion>li .tab-head{
 width: 160px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 color: #9c9c9c;
 font-size: 16px;
 background: #f2f2f2;
}
.site-accordion>li .tab-head:hover{
 background: #292d48;
}
.site-accordion>li .tab-head:after{
 content: '';
 border: 5px solid #4F5160;
 border-color: #4F5160 transparent transparent transparent;
 margin-top: 20px;
 position: relative;
 top: 10px;
 left: 5px;
}
.site-accordion>li .tabs-list{
 display: none;
}
.site-accordion>li .tabs-list li{
 width: 160px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 color: #9c9c9c;
.site-accordion>li .tabs-list li:hover{
 background: #f2f2f2;
}

jQuery代码

$('.tab-head').click(function(){
     $(this).next().slideToggle();
     $('.tab-head').css('background','#FFFFFF');
     $(this).css('background','#292d48');

    })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
You might like
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python发展史及网络爬虫
2019/06/19 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
物业管理大学生个人的自我评价
2013/10/10 职场文书
质量承诺书范文
2014/03/27 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
2014年英语工作总结
2014/12/20 职场文书
大学生见习总结报告
2015/06/24 职场文书
圣诞晚会主持词
2015/07/01 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
python三子棋游戏
2022/05/04 Python