下拉菜单IE下不兼容，哪位帮忙解决下！_下拉时间菜单不兼容-优快云博客

本文链接：https://blog.youkuaiyun.com/yuyuntao2003/article/details/8783674

本文介绍了一种使用HTML和JavaScript实现的可折叠网页导航菜单。该菜单通过点击标题来展开或收起子菜单，并且能够保持点击状态的记忆效果。文章详细展示了如何通过简单的样式设置和jQuery的运用达到美观且实用的导航效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript" src="./jx/jquery.js"></script>
<style type="text/css">
.aps_nuv_tittle{display:block;padding:0 0 0 20px; float:left; clear:left;height:42px;line-height:42px;background:#e6e6e6;border-bottom:1px solid #a2a2a2;border-top:1px solid #fff; width:210px; font-size:14px;color:#4e4e4e;cursor:pointer;}
.aps_nuv_tittle img{padding:0 8px 0 0; vertical-align:middle;}
.aps_nuv_color{background:#B31212;text-decoration:none;color:#fff;font-weight:bold;}
.aps_nuv_tittle .aps_nuv_label{ vertical-align:middle; display:inline-block;cursor:pointer;}
.aps_nuv_tittle:hover{background:#B31212;text-decoration:none;color:#fff;font-weight:bold; cursor:pointer;}
.aps_nuv{display:none; clear:left;}
.aps_nuv .aps_nuv_son{width:190px;height:30px; line-height:30px;padding:0 0 0 40px; float:left;border-top:1px solid #fff;font-size:14px; }
.aps_nuv .aps_nuv_son:hover{background:#B31212;text-decoration:none;color:#fff;font-weight:bold; border-top:1px solid #fff; cursor:pointer;}
#aps_nuv_bao{ width:230px; border:1px solid #f79595;}
.nuv_clear{clear:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var lastId = "";
$(".aps_nuvbao").click(function(){
$(this).parent().find(".aps_nuv_tittle").css("background","#e6e6e6").css("color","#4e4e4e").css("font-weight","normal");
$(this).find(".aps_nuv_tittle").css("background","#B31212").css("color","#fff").css("font-weight","bold");

$(this).find("div[id^=colr_]").slideToggle(function(){

var id = $(this).attr("id");
$("div[id^=colr_][id!="+id+"]").slideUp();

$("div[id="+id+"]").parent().find("img").attr("src","images/min.png");
$("div[id^=colr_][id!="+id+"]").parent().find("img").attr("src","images/plus.png");
//alert(lastId);
if(id==lastId){
$("div[id="+id+"]").parent().find("img").attr("src","images/plus.png");
}
lastId = id;
});

});
$(".aps_nuv_son").click(function(){return false;});
});
</script>
</head>
<body>
<div id="aps_nuv_bao">
<div class="aps_nuvbao">
<a class="aps_nuv_tittle aps_nuv_color" title="显示/隐藏层"><img src="images/plus.png" /><label class="aps_nuv_label">Web(28)</label></a>
<div id="colr_1" class="aps_nuv">
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
</div>
</div>
<div class="nuv_clear"></div>
<div class="aps_nuvbao">
<a class="aps_nuv_tittle" title="显示/隐藏层"><img src="images/plus.png" /><label class="aps_nuv_label">Back office(14)</label></a>
<div id="colr_2" class="aps_nuv">
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
</div>
</div>
<div class="nuv_clear"></div>
<div class="aps_nuvbao">
<a class="aps_nuv_tittle" title="显示/隐藏层"><img src="images/plus.png" /><label class="aps_nuv_label">Collaboration(70)</label></a>
<div id="colr_3" class="aps_nuv">
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
</div>
</div>
<div class="nuv_clear"></div>
<div class="aps_nuvbao">
<a class="aps_nuv_tittle" title="显示/隐藏层"><img src="images/plus.png" /><label class="aps_nuv_label">Front office(35)</label></a>
<div id="colr_4" class="aps_nuv">
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
<div class="aps_nuv_son">Back office(14)</div>
<div class="aps_nuv_son">Collaboration(8)</div>
<div class="aps_nuv_son">Back office(5)</div>
<div class="aps_nuv_son">Front office(13)</div>
</div>
</div>
<div class="nuv_clear"></div>
</div>
</div>
</body>
</html>