javascript手风琴下拉菜单实现代码


Posted in Javascript onNovember 12, 2015

手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图:

javascript手风琴下拉菜单实现代码

具体的javascript手风琴下拉菜单代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴下拉菜单效果</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  ul{
    list-style: none;
  }
  .nav ul{
    display: none;
  }
  .nav ul li{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
  .nav div{
    background: #4ecc70;
    width: 100px;
    border-radius: 10px;
    line-height: 34px;
    text-align: center;
    color: white;
    cursor: pointer;
  }
  .demo{
/*   display: none;*/
  }
  .red{
    background:red;
    border-radius: 10px;
  }
   
</style>
<script>
$(function(){
  //case 1
//   $('.nav div').on('click',function(){
//     if(false==$(this).next().is(':visible')){
//       $('.nav ul').slideUp(300);
//     }
//     $(this).next().slideToggle(300);
//   })
  //case 2
  var changeType=$('.nav').find('div');
  $.each(changeType,function(){
    $(this).on('click',function(){
      if(false==$(this).next().is(':visible')){
        $('.nav ul').slideUp(300);
      }
      $(this).next().slideToggle(300);
      })
      $('.nav ul:eq(0)').show();
     
  })
  var hoverType=$('.nav .u').find('li')
  $.each(hoverType,function(){
    $(this).hover(function(){
      $(this).addClass('red').siblings().removeClass('red');
    })
  })
   
})
</script>
</head>
<body>
<ul class="nav">
  <li>
    <div>水果</div>
    <ul class="u">
      <li>香蕉</li>
      <li>橘子</li>
      <li>梨子</li>
      <li>西瓜</li>
    </ul>
  </li>
  <li>
    <div>蔬菜</div>
    <ul class="u">
      <li>芹菜</li>
      <li>黄瓜</li>
      <li>洋葱</li>
      <li>西瓜</li>
    </ul>
  </li>
  <li>
    <div>肉类</div>
    <ul class="u">
      <li>鸡肉</li>
      <li>兔肉</li>
      <li>鸭肉</li>
      <li>龙肉</li>
    </ul>
  </li>
  
</ul>
</body>
</html>

以上就是为大家分享的javascript手风琴下拉菜单代码,希望对大家的学习有所帮助,动手为自己的网站实现手风琴下拉菜单吧!

Javascript 相关文章推荐
JQuery切换显示的效果实例代码
Feb 27 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
九种原生js动画效果
Nov 11 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
jQuery获得内容和属性示例代码
2014/01/16 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
npm qs模块使用详解
2020/02/07 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python创建进程fork用法
2015/06/04 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
中学老师的自我评价
2013/11/07 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
弄虚作假心得体会
2014/09/10 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python