jquery下拉选菜单

jquery下拉选菜单

html:

   <div class="wrap">
            <ul>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul class="ul">
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单2</a>
                    <ul class="ul">
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单3</a>
                    <ul class="ul">
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                        <li><a href="javascript:void(0);">二级菜单</a></li>
                    </ul>
                </li>
            </ul>
        </div>

css:

            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            .wrap{
                width: 330px;
                height: 30px;
                margin: 100px auto 0;
                padding-left: 10px;
                background-image: url(img/bg.jpg);
            }
            .wrap li{
                background-image: url(img/libg.jpg);
            }
            .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;
            }

jq:

<script src="js/jquery-3.5.1.min.js"></script>
        <script>
            /* 
             为每一个.wrap>ul>li ---li 注册鼠标 移入移出事件
             mouseover:鼠标经过事件
             mouseout: 鼠标离开事件
             mouseenter:鼠标进入事件
             mouseleave:鼠标离开事件
             */
            $(function(){
                $('.wrap>ul>li').mouseenter(function(){
                    $(this).children('.ul').show();
                });

                $('.wrap>ul>li').mouseleave(function(){
                    $(this).children('.ul').hide();
                });
            });
        </script>

分析：

javascript:void(0); 禁止 超链接 刷新页面

mouseenter() 注册 鼠标移入事件----mouseenter([[data],fn])当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave() 注册 鼠标移出事情

find() 找子元素

children() 找子元素

show() 显示隐藏的匹配元素

hide() 隐藏显示的元素