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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 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中构造函数和析构函数解析
2014/10/10 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
35个Python编程小技巧
2014/04/01 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python文件及目录操作代码汇总
2020/07/08 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
生产部统计员岗位职责
2014/01/05 职场文书
满月酒答谢词
2014/01/14 职场文书
《燕子》教学反思
2014/02/18 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
地球一小时活动总结
2015/02/27 职场文书
卡特教练观后感
2015/06/08 职场文书