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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现动态向上滚动
Dec 21 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
js实现星星打分效果
2020/07/05 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python监控文件或目录变化
2016/06/07 Python
高效使用Python字典的清单
2018/04/04 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
浅析Python的命名空间与作用域
2020/11/25 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
最热门的自我评价
2013/12/30 职场文书
元旦晚会感言
2014/03/12 职场文书
文明村创建实施方案
2014/03/27 职场文书
环保倡议书50字
2014/05/15 职场文书
商业街策划方案
2014/05/31 职场文书
企业年度评优方案
2014/06/02 职场文书
租房协议书样本
2014/08/20 职场文书
单位单身证明样本
2014/10/11 职场文书
房产公证书
2015/01/23 职场文书
考试作弊检讨书
2015/01/27 职场文书