jQuery下拉菜单

最新推荐文章于 2023-07-28 15:50:21 发布

来干了这碗代码

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量137

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/nsnydnz/article/details/119768080

版权

jQuery 下拉菜单事件处理 CSS样式 HTML结构

关键词由CSDN通过智能技术生成

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery下拉菜单案例

文章目录

jQuery下拉菜单案例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>下拉菜单案例</title>
     
     <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
    
        ul {
          list-style: none;
        }
    
        .wrap {
          width: 330px;
          height: 30px;
          margin: 100px auto 0;
          padding-left: 10px; 
        } 
    
        .wrap>ul>li {
          float: left;
          margin-right: 10px;
          position: relative;
        }
    
        .wrap a {
          display: block;
          height: 30px;
          width: 100px;
          text-decoration: none;
          color: #000;
          line-height: 30px;
          text-align: center;
        }
    
        .wrap li ul {
          position: absolute;
          top: 30px;
          display: none;
        }
        
      </style>
     <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
      <script>
        $(function () {
    
          var $li = $(".wrap>ul>li")
          //给li注册鼠标经过事件，让自己的ul显示出来
          $li.mouseenter(function () {
            //找到所有的儿子，并且还得是ul
            $(this).children("ul").show();
          })
    
          $li.mouseleave(function () {
            $(this).children("ul").hide();
          })
    
    
        });
      </script>
    </head>
    
    <body>
      <div class="wrap">
        <ul>
          <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul class="ul">
              <li><a href="javascript:void(0);">二级菜单11</a></li>
              <li><a href="javascript:void(0);">二级菜单12</a></li>
              <li><a href="javascript:void(0);">二级菜单13</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0);">一级菜单2</a>
            <ul>
              <li><a href="javascript:void(0);">二级菜单21</a></li>
              <li><a href="javascript:void(0);">二级菜单22</a></li>
              <li><a href="javascript:void(0);">二级菜单23</a></li>
            </ul>
          </li>
          <li>
            <a href="javascript:void(0);">一级菜单3</a>
            <ul>
              <li><a href="javascript:void(0);">二级菜单31</a></li>
              <li><a href="javascript:void(0);">二级菜单32</a></li>
              <li><a href="javascript:void(0);">二级菜单33</a></li>
            </ul>
          </li>
        </ul>
      </div>
    
    </body>
 </html>