网页下拉菜单-jQuery实现-案例

效果展示:

网页下拉菜单-jQuery实现-案例_第1张图片

分析:

给一级菜单设置鼠标移入事件,显示二级菜单。
给一级菜单设置鼠标离开事件,隐藏二级菜单。

核心代码非常简单,主要是利用选择器找到相应的元素就可以了。

$('.wrap>ul>li').mouseover(function(){
	// 谁触发了鼠标移入事件,谁就是this,this是一个dom对象
	// show()方法的本质还是更新display的属性为block
	$(this).children('ul').show();
});
$('.wrap>ul>li').mouseout(function(){
	// 谁触发了鼠标移入事件,谁就是this,this是一个dom对象
	// hide()方法的本质还是更新display的属性为none
	$(this).children('ul').hide();
});

这里要注意一点,mouseover事件在鼠标移动到选取的元素及其子元素上都会被触发。
而mouseenter事件只会在鼠标移动到选取的元素上被触发。

所以如果有鼠标移入事件,请使用mouseenter,而不是mouseover。
鼠标离开事件使用mouseleave,不要使用mouseout。

代码:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: #FF0000;
        }

        .wrap li{
            background-color: #FFC0CB;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    style>
head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单2a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单3a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
    ul>
div>
body>
html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
	$(function(){
		$('.wrap>ul>li').mouseenter(function(){
			// 谁触发了鼠标移入事件,谁就是this,this是一个dom对象
			$(this).children('ul').show();
		});
		$('.wrap>ul>li').mouseleave(function(){
			// 谁触发了鼠标移入事件,谁就是this,this是一个dom对象
			$(this).children('ul').hide();
			console.log(this);
		});
	});
script>

end.

你可能感兴趣的:(jQuery,jquery,网页下拉菜单,鼠标移入事件,mouseenter)