码迷,mamicode.com
首页 > Web开发 > 详细

jquery 折叠菜单案例

时间:2021-03-01 14:07:32      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ogg   ade   next   idt   最好   use   java   text   pad   

<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>

 

jquery 折叠菜单案例

标签:ogg   ade   next   idt   最好   use   java   text   pad   

原文地址:https://www.cnblogs.com/dazahui/p/14459791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!