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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
用户注册常用javascript代码
2009/08/29 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
详解vue 组件
2020/06/11 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python切片用法实例教程
2014/09/08 Python
python连接oracle数据库实例
2014/10/17 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python 字典套字典或列表的示例
2019/12/16 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
草船借箭教学反思
2014/02/03 职场文书
职业规划实施方案
2014/06/10 职场文书
保险专业求职信
2014/07/07 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
css3 选择器
2022/05/11 HTML / CSS