jQuery实现的无限级下拉菜单功能示例

2019-11-20 09:01:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的无限级下拉菜单功能。分享给大家供大家参考，具体如下：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>下拉菜单(无限级)</title><style>*{  padding: 0;  margin: 0;}li{  list-style-type: none;}body{  margin: 50px;}.hide{  display: none;}.menu{  cursor: pointer;}</style></head><body><ul>  <li class="menu" style="float: left;">    <span>一级菜单</span>    <ul class="hide">      <li class="menu">        <span>二级菜单</span>        <ul class="hide">          <li class="menu">            <span>三级菜单</span>            <ul class="hide">              <li class="menu">                <span>四级菜单</span>                <ul class="hide">                  <li class="menu"><span>五级菜单</span></li>                </ul>              </li>            </ul>          </li>        </ul>      </li>    </ul>  </li>  <li class="menu" style="float: left;">    <span>一级菜单</span>    <ul class="hide">      <li class="menu">        <span>二级菜单</span>        <ul class="hide">          <li class="menu">            <span>三级菜单</span>            <ul class="hide">              <li class="menu">                <span>四级菜单</span>                <ul class="hide">                  <li class="menu"><span>五级菜单</span></li>                </ul>              </li>            </ul>          </li>        </ul>      </li>    </ul>  </li></ul><script src="jquery-1.7.2.min.js"></script><script>$(function(){  var menu = $('.menu');  menu.hover(function(){    $(this).children('ul').show();  },function(){    $(this).children('ul').hide();  });});</script></body></html>

运行效果图如下：