jquery 折叠菜单案例

时间：2021-03-01 14:07:32 收藏：0 阅读：0
<style>
    div{
        width: 200px;
        height: 20px;
        background-color: red;
    }
    ul{
        display: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #ccc;
    }

</style>
<body>
<div>顶级菜单1</div>
<ul>
    <li>子菜单1</li>
    <li>子菜单2</li>
    <li>子菜单3</li>
</ul>
<div>顶级菜单2</div>
<ul>
    <li>子菜单1</li>
    <li>子菜单2</li>
    <li>子菜单3</li>
</ul>

<script type="text/javascript">

    $(function(){
        $(‘div‘).click(function(){
            $(this).next(‘ul‘).slideToggle(500);
        });

        //可以换成其他事件(比如 鼠标悬浮)
   /*     $(‘div‘).mouseover(function(){
            //根据点击的div 找对应的子菜单ul
            //this 就是触发事件的div  dom对象
            // $(this).next(‘ul‘).toggle(2000);
            $(this).next(‘ul‘).slideToggle(500);//最好的
            // $(this).next(‘ul‘).fadeToggle(500);
        });*/
    })

</script>
</body>