快速实现jQuery多级菜单效果

2019-11-19 17:46:12

字体：大中小

来源：转载

供稿：网友

利用js或者jquery最快速实现导航条的多级菜单效果。

我这个代码用的是jquery1.9.1，ie8以下的兼容有待考虑，主要是代码的简介性，write less,do more.

<!DOCTYPE html><html lang="en"><meta charset="utf-8"><head>  <title></title>  <style type="text/css">    .top-nav    {      font-size: 12px;      font-weight: bold;      list-style: none;    }    .top-nav li    {      float: left;      list-style: none;      margin-right: 1px;    }    .top-nav li a    {      line-height: 20px;      text-decoration: none;      background: #DDDDDD;      color: #666666;      display: block;      width: 80px;      text-align: center;    }    .top-nav li a:hover    {      background: #900;      color: #FFF;    }    .top-nav ul    {      list-style: none;      display: none;      width: 80px;      padding: 0;      position: relative;    }    .top-nav li ul li ul    {      position: absolute;      top: 0;      left: 80px;    }  </style></head><body>  <ul class="top-nav">    <li><a href="#">首页内容</a>      <ul>        <li><a href="#">前端课程 +</a>          <ul>            <li><a href="#">javascript</a></li>            <li><a href="#">css</a></li>            <li><a href="#">jquery</a></li>          </ul>        </li>        <li><a href="#">手机开发</a>          <ul>            <li><a href="#">ios开发</a></li>            <li><a href="#">android开发</a></li>            <li><a href="#">WP开发</a></li>          </ul>        </li>        <li><a href="#">后台编程</a></li>      </ul>    </li>    <li><a href="#">课程大厅</a> </li>    <li><a href="#">学习中心 +</a>      <ul>        <li><a href="#">前端课程 +</a>          <ul>            <li><a href="#">javascript</a></li>            <li><a href="#">css</a></li>            <li><a href="#">jquery</a></li>          </ul>        </li>        <li><a href="#">手机开发</a>          <ul>            <li><a href="#">ios开发</a></li>            <li><a href="#">android开发</a></li>            <li><a href="#">WP开发</a></li>          </ul>        </li>        <li><a href="#">后台编程</a></li>      </ul>    </li>    <li><a href="#">关于我们</a></li>  </ul>    </script><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript">   $(function(){    $(".top-nav li").hover(function(){      $(this).has("ul").children("ul").fadeIn();    },function(){      $(this).has("ul").children("ul").hide();    });   }) </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于javascript实现最简单选项卡切换

下一篇：angular实现商品筛选功能