jquery下拉菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 入口函數
$(document).ready(function() {
var jqLi = $("#wrap>ul>li");
jqLi.mouseenter(function() {
$(this).children("ul").show()
})
jqLi.mouseleave(function() {
$(this).children("ul").hide()
})
});
</script>
<style type="text/css">
#wrap li ul {
display: none;
}
a {
display: block;
width: 100px;
}
#wrap>ul>li {
float: left;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>
<a href="#">一級菜單</a>
<ul>
<li>
<a>二級菜單1</a>
</li>
<li>
<a>二級菜單2</a>
</li>
<li>
<a>二級菜單3</a>
</li>
</ul>
</li>
<li>
<a href="#">一級菜單</a>
<ul>
<li>
<a>二級菜單1</a>
</li>
<li>
<a>二級菜單2</a>
</li>
<li>
<a>二級菜單3</a>
</li>
</ul>
</li>
<li>
<a href="#">一級菜單</a>
<ul>
<li>
<a>二級菜單1</a>
</li>
<li>
<a>二級菜單2</a>
</li>
<li>
<a>二級菜單3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
相關文章
- 1. jQuery下拉菜單
- 2. jquery實現下拉菜單
- 3. jquery簡易下拉菜單
- 4. jQuery---下拉菜單案例
- 5. jQuery實現仿淘寶下拉菜單
- 6. jquery ui 下拉菜單 隱藏
- 7. jquery多級樹形下拉菜單
- 8. jQuery插件：模擬select下拉菜單
- 9. jquery+css實現點擊下拉菜單
- 10. jQuery+Superfish製做下拉菜單
- 更多相關文章...
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery下拉菜單
- 2. jquery實現下拉菜單
- 3. jquery簡易下拉菜單
- 4. jQuery---下拉菜單案例
- 5. jQuery實現仿淘寶下拉菜單
- 6. jquery ui 下拉菜單 隱藏
- 7. jquery多級樹形下拉菜單
- 8. jQuery插件：模擬select下拉菜單
- 9. jquery+css實現點擊下拉菜單
- 10. jQuery+Superfish製做下拉菜單