jq三级导航的知识点总结

abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq三级导航</title><script type="text/javascript" src="jquery-3.3.1.min.js">&

<!DOCTYPE html>

<html>

<head>

<title>jq三级导航</title>

*{margin: 0;padding: 0;}

.menu{width: 800px;height: 40px;background: #1C77E2;border-radius: 3px;box-shadow: 0px 2px 5px #666;margin:30px auto;}

li{list-style: none;width: 100px;}

.one>li{float: left; line-height: 40px;width: 100px;text-align: center;}

a{text-decoration: none;color: #fff;}

.twobox li{background:rgba(28,119,226,0.8); position:relative;}

.twobox li:hover{background:#1C77E2; }

.three{position: absolute;top: 0px;left: 100px;}

</style>

$(document).ready(function(){

//隐藏二级与三级下拉菜单

$('.twobox').hide()

$('.three').hide()

//当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单

$('.one>li').mouseover(function(){

$(this).find('.twobox').slideDown(500)

})

//当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单

$('.one>li').mouseleave(function(){

$(this).find('.twobox').slideUp(500)

})

//当鼠标移动到包含三级菜单的二级菜单时显示当前三级菜单

$('.two').mouseover(function(){

$(this).find('.three').slideDown(500)

})

//当鼠标移出包含三级菜单的二级菜单时隐藏当前三级菜单

$('.two').mouseleave(function(){

$(this).find('.three').slideUp(500)

})

</script>

</head>

<body>

<div>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

本例用到的知识点总结如下

一、用到了事件：

1、mouseover: 当鼠标指针从元素上移开时，发生 mouseout 事件

2、mouseleave: 在鼠标指针离开被选元素时，才会触发 mouseleave 事件

3、find() 方法返回被选元素的后代元素。

二、动画效果

1、 Sildedown：slideDown() 方法通过使用滑动效果，显示隐藏的被选元素

2、 Slideup：以滑动方式隐藏被选元素

Correcting teacher：韦小宝Correction time：2019-02-11 09:13:29
Teacher's summary：写的很不错 jQuery实现下拉导航要比js来实现的代码少了很多，实际上css也可以来实现！

jq三级导航的知识点总结

Popular Entries