js实现二级导航功能


Posted in Javascript onMarch 03, 2017

效果图:

js实现二级导航功能

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{text-decoration: none;}
  *{margin: 0;padding: 0;box-sizing: border-box;font-family: "微软雅黑";}
  li{list-style-type: none;}
  .box{width: 220px;height: 477px;margin-top: 110px;margin-left: 100px;}
  h3{width: 100%;height: 50px;line-height: 50px;text-align: center;background: #09f;}
  h3 a{color: #FFFFFF;}
  h3 a:hover{color: deeppink;}
  ul li{width: 100%;height: 70px;line-height: 70px;border: 1px solid red;background: #09e;}
  ul li:not(:last-child){border-bottom: none;}
  ul li a{display: block;color:#FFFFFF;text-align: center;font-weight: bold;font-size: 18px;}
  ul li:hover{background: #00E8D7;}
  ul li:hover a{color: orange;}
  ul{position: relative;}
  .content{
  position: absolute;top:0;left: 220px;
  width: 800px;height: 300px;
  border: 1px solid #00FF66;
  display: none;
  }
 </style>
 </head>
 <body>
 <p style="margin: 20px;">
  end():结束当前链条中最近的筛选操作,并将匹配元素还原为之前的匹配状态。
 </p>
 <div class="box">
  <h3><a href="" target=" rel="external nofollow" _blank">全部菜单</a></h3>
  <ul>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   11111111111111111111111111
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   22222222222222222222222222
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   33333333333333333333333333333
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   44444444444444444444
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   5555555555555555555555555555
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   6666666666666666666666666666666666
   </div>
  </li>
  </ul>
 </div>
 </body>
</html>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
 $('ul li').hover(function(){
  $(this).find('.content').show().end().siblings().find('.content').hide();
 },function(){
  $(this).find('.content').hide();
 }); 
 })
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
Vue SSR 组件加载问题
May 02 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
You might like
一个SQL管理员的web接口
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python求素数示例分享
2014/02/16 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
详解anaconda安装步骤
2020/11/23 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
《观舞记》教学反思
2014/04/16 职场文书
全民创业工作总结
2015/08/13 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python