2021-05-20 10:47

Jquery实现二级菜单显示和隐藏

wanmatea

WEB前端

(1118)

(0)

收藏

Html:

<ul class="nav">
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
        <li>一级菜单
        <ul class="secondNav">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
        </li>
    </ul>

CSS:

<style type="text/css">
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav>li{
            float: left;
            padding: 10px 20px;
            background-color: #C00;
            color: #FFF;
        }
        
        .secondNav{
            display: none;
        }
        
        .secondNav li{
            padding-top: 10px;
        }
        
        
    </style>

JS:

<script type="text/javascript">
        $(function(){
			//给一级菜单li绑定鼠标经过事件
            $(".nav li").mouseover(function(){
				//显示当前li下面的子菜单
                $(this).children().show();
            });
			//给一级菜单li绑定鼠标离开事件
            $(".nav li").mouseout(function(){
				//隐藏当前li下面的子菜单
                $(this).children().hide();
            });
        });
    </script>

实现效果:

Dingtalk_20210520104029.jpg

0条评论

点击登录参与评论