基础 - jQuery的下拉菜单

最新推荐文章于 2024-11-11 09:05:31 发布

weixin_30419799

最新推荐文章于 2024-11-11 09:05:31 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/WeWeZhang/p/5796578.html

本文介绍了mouseover、mouseout、mouseenter、mouseleave等鼠标事件的区别，并通过一个具体的例子展示了如何使用jQuery实现列表项悬停时子菜单的滑动展开与收起效果。

mouseover 和 mouseenter

mouseout 和 mouseleave

mouseover / mouseout 　　鼠标进入/走出元素或其子元素时均可触发

mouseenter / mouseleave　鼠标进入/走出元素才会触发

$().hover(function () {
    /*mouseenter*/
}, function () {
    /*mouseleave*/
});

$().hover(function () {
    /*mouseenter和mouseleave*/

});

slideToggle jQuery帮帮我们封装好的切换

<div id="box" class="box">
    <ul>
        <li>
            <a href="https://www.baidu.com">第一页</a>
            <ul>
                <li><a href="https://www.baidu.com">第一页1</a></li>
                <li><a href="https://www.baidu.com">第一页2</a></li>
                <li><a href="https://www.baidu.com">第一页3</a></li>
            </ul>
        </li>
        <li>
            <a href="https://www.baidu.com">第二页</a>
            <ul>
                <li><a href="https://www.baidu.com">第二页1</a></li>
                <li><a href="https://www.baidu.com">第二页2</a></li>
                <li><a href="https://www.baidu.com">第二页3</a></li>
            </ul>
        </li>
        <li>
            <a href="https://www.baidu.com">第三页</a>
            <ul>
                <li><a href="https://www.baidu.com">第三页1</a></li>
                <li><a href="https://www.baidu.com">第三页2</a></li>
                <li><a href="https://www.baidu.com">第三页3</a></li>
            </ul>
        </li>
    </ul>
</div>

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}

.box {
    width: 330px;
    height: 30px;
    padding-left: 10px;
    margin: 100px auto;
    background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
}
.box ul li {
    position: relative;
    float: left;
    width: 100px;
    line-height: 30px;
    margin-right: 10px;
}
.box ul li a{
    display: block;
    text-align: center;
    text-decoration: none;
    background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
}
.box ul li ul{
    position: absolute;
    display: none;
}

$(function () {
    
    $("#box>ul>li").hover(function () {
        $(this).children("ul").slideToggle();
    });

});

转载于:https://www.cnblogs.com/WeWeZhang/p/5796578.html