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 Plupload上传插件的使用
Apr 19 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 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打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
dedecms中使用php语句指南
2014/11/13 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
通过python3实现投票功能代码实例
2019/09/26 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
考博专家推荐信模板
2013/12/02 职场文书
优秀教师工作感言
2014/02/16 职场文书
中国好声音广告词
2014/03/18 职场文书
会计人员岗位职责
2014/03/19 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
秋收起义观后感
2015/06/11 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书