本文介绍了一种使用jQuery实现的下拉菜单效果，通过HTML、CSS和JavaScript代码展示了如何创建响应式二级菜单，并利用三角形图标指示菜单状态。菜单项在鼠标悬停时展开，隐藏时则显示三角形图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现下拉菜单</title>
<style>
.index-head {width: 100%;display: flex;justify-content: center;background-color: #ccc;}
.index-headleft {width: 50%;display: flex;align-items: center;}
.index-ul {display: flex;justify-content: space-between;width: 100%;margin-right: 26px;}
.index-ul li {font-size: 16px;color: #333;display: flex;align-items: center;cursor: pointer;position: relative;}
.indexUl-ul {width: 100px;position: absolute;top: 36px;z-index: 99;left: -64px;}
.indexUl-ul li {height: 30px;display: flex;align-items: center;justify-content: center;border: 1px solid #ccc;background-color: #fff;}
.triangle-down {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #000;margin-left: 10px;}
.triangle-up {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid #000;margin-left: 10px;}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
// 二级菜单
function toShow(me){
var node = $(me).find(".indexUl-ul");
if (node.is(':hidden')) {
$(me).find(".indexUl-ul").show();
$(me).find(".triangle-down").hide();
$(me).find(".triangle-up").show();
}else{
$(me).find(".indexUl-ul").hide();
$(me).find(".triangle-up").hide();
$(me).find(".triangle-down").show();
}
}
</script>
</head>
<body>
<div class="index-head">
<div class="index-headleft">
<ul class="index-ul">
<li>语文</li>
<li>数学</li>
<li οnclick="toShow(this)" class="managerList">
音乐
<span class="triangle-down"></span>
<span class="triangle-up" style="display: none;"></span>
<ul class="indexUl-ul" style="display: none;">
<li>古典</li>
<li>流行</li>
<li>民谣</li>
<li>说唱</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
