创建一个HTML页面,使用<script>标记直接引入jQuery文件;定义一组无序列表,设置CSS样式,实现列表项从左到右导航条效果;在有下拉菜单的导航标签项li中各嵌套一组无序列表,设置CSS样式;使用jQuery获取作为导航标签的li元素,并通过事件方法绑定mouseover()事件,实现鼠标移到导航某个标签时,获取当前元素的子元素ul并应用slideDown()方法垂直滑动显示(向下增大)其下拉菜单;使用jQuery获取作为导航标签的li元素,并通过事件方法绑定mouseout()事件,实现鼠标移出导航某个标签时,获取当前元素的子元素ul并应用slideUp()方法垂直滑动隐藏(向上减小)其下拉菜单。
时间: 2024-02-26 09:58:19 浏览: 83
好的,以下是实现你所描述的HTML页面及jQuery代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
padding: 10px;
background-color: #eee;
border-right: 1px solid #ccc;
}
li:hover {
background-color: #ccc;
cursor: pointer;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #eee;
}
ul ul li {
float: none;
border-bottom: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Company</li>
<li>Team</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>SEO</li>
<li>Social Media</li>
</ul>
</li>
<li>Contact</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("li").mouseover(function() {
$(this).children("ul").slideDown();
});
$("li").mouseout(function() {
$(this).children("ul").slideUp();
});
});
</script>
</body>
</html>
```
这个页面包含一个无序列表,其中每个列表项都是一个导航标签。在“About”和“Services”两个标签中,还嵌套了另一个无序列表,表示下拉菜单。CSS样式设置使得导航条呈现从左到右的排列效果,并且鼠标移到某个标签时,下拉菜单垂直滑动显示;鼠标移出时,下拉菜单垂直滑动隐藏。
使用jQuery的$()函数获取所有li元素,并使用mouseover()和mouseout()方法分别绑定鼠标移入和移出事件处理程序。当鼠标移到某个标签上时,使用children()方法获取它的子元素ul并应用slideDown()方法进行显示;当鼠标移出时,使用同样的方法应用slideUp()方法进行隐藏。
阅读全文