jquery水平导航栏动态菜单

附上结果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>jQuery点击展开收缩树形菜单</title>  <style type="text/css">  *{margin: 0;padding: 0}  body{font-size: 12px;font-family: "宋体","微软雅黑";}  ul,li{list-style: none;}  a:link,a:visited{text-decoration: none;color: #fff;}  .list{height:26px;border-bottom:solid 1px #ccc ;margin:40px auto 0 auto; background:#009966;}  .list ul {list-style:none;margin:0px;}     .list ul li{float:left; padding:0px 40px;line-height:26px; border-bottom:0;}  .list ul li a{padding-left: 10px;color: #000; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;  }  .list ul li ul{width: 100px;border:1px, solid,#ccc}  .list ul li ul li { list-style:none;margin:0px; padding:0px ; background-color:#ffff99; border-color: #ffffff}  </style> <script type="text/javascript" src="js/jquery-3.2.1.js"></script>  <script type="text/javascript">  $(document).ready(function() {  $('.inactive').click(function(){  if($(this).siblings('ul').css('display')=='none'){  $(this).addClass('inactives');  $(this).siblings('ul').slideDown(100).children('li');  }else{   $(this).removeClass('inactive');  $(this).siblings('ul').slideUp(100);  }   })  });  </script>
</head>
<body>  <div class="list">  <ul class="yiji">  <li><a href="#" class="inactive active">教育教学</a>  <ul> <li><a href="#">信息学院</a></li>  <li><a href="#">机电学院</a></li>  <li><a href="#">管理学院</a></li>  </ul>  </li> <li><a href="#" class="inactive">组织结构</a>  <ul style="display: none">  <li><a href="#" >教务处</a></li>  <li><a href="#">科研处</a></li>  <li><a href="#">财务处</a></li>  </ul>  </li><li><a href="#" class="inactive">师资队伍</a>  <ul style="display: none">  <li><a href="#" class="inactive active">博导</a></li>  <li><a href="#" class="inactive active">硕导</a></li>  <li ><a href="#">教师</a></li>  </ul>  </li>  <li><a href="#" class="inactive">招生就业</a>  <ul style="display: none">  <li><a href="#" class="inactive active">招生信息</a></li>  <li><a href="#" class="inactive active">就业信息</a></li>  <li ><a href="#">继续教育</a></li>  </ul>  </li>  </ul>  </div>
</body>
</html>

jquery水平导航栏动态菜单相关推荐

HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
CSS实现垂直/水平导航栏
文章目录一级基本导航栏怎么显示?导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么?in ...
Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
浮动导航栏php源码,JQuery 浮动导航栏实现代码
JQuery 浮动导航栏 /* 浮动导航栏 Begin */ #floatMenu { padding-top: 5px; background: url(http://img.jb51.net/im ...
后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
html导航栏动态图标,导航栏动态图.html
导航栏动态图 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif' ...
CSS导航栏水平导航栏出炉
越往后面这速度就降低下来了,前面的简单可以快速过去. <!DOCTYPE html> <html lang="en"><head><met ...
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...

jquery水平导航栏动态菜单

jquery水平导航栏动态菜单相关推荐

最新文章

热门文章