基础 - 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();
    });

});