首先你应该在这个div上面做一个关闭的的图标，或者按钮，（比如画一个x字的），只要设置点击这个元素让这个div的display属性设置为none就可以了
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>用CSS+DIV实现下拉菜单效果</title>
<style type="text/css">
*{margin:0padding:0border:0}
body {
font-family: arial, 宋体, serif font-size:12px
}
#nav {
line-height: 24px list-style-type: none background:#666
}
#nav a {
display: block width: 80px text-align:center
}
#nav a:link {
color:#666 text-decoration:none
}
#nav a:visited {
color:#666text-decoration:none
}
#nav a:hover {
color:#FFFtext-decoration:nonefont-weight:bold
}
#nav li {
float: left width: 80px background:#CCC
}
#nav li a:hover{
background:#999
}
#nav li ul {
line-height: 27px list-style-type: nonetext-align:left
left: -999em width: 180px position: absolute
}
#nav li ul li{
float: left width: 180px
background: #F6F6F6
}
#nav li ul a{
display: block width: 156pxtext-align:leftpadding-left:24px
}
#nav li ul a:link {
color:#666 text-decoration:none
}
#nav li ul a:visited {
color:#666text-decoration:none
}
#nav li ul a:hover {
color:#F3F3F3text-decoration:nonefont-weight:normal
}
#nav li:hover ul {
left: auto
}
#nav li.sfhover ul {
left: auto
}
#content {
clear: left
}
</style>
<script type="text/javascript">
<!-- //--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li")
for (var i = 0 i < sfEls.length i++) {
sfEls[i].onmouseover = function() {
this.className += (this.className.length > 0 ? " " : "") + "sfhover"
}
sfEls[i].onMouseDown = function() {
this.className += (this.className.length > 0 ? " " : "") + "sfhover"
}
sfEls[i].onMouseUp = function() {
this.className += (this.className.length > 0 ? " " : "") + "sfhover"
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),"")
}
}
}
window.onload = menuFix
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
<li><a href="#">产品四</a></li>
<li><a href="#">产品五</a></li>
<li><a href="#">产品六</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例一</a></li>
<li><a href="#">案例二</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们一</a></li>
<li><a href="#">我们二</a></li>
<li><a href="#">我们三</a></li>
<li><a href="#">我们四我们四我们四我们四</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
看下这个是不是
加一个*的a标签，设置id，然后店家标签的时候让div的display为none就好的；例如：<div id='one'>
<a id='close'>×</a>
</div>
js部分：
$('#close').click(function(){
$('#one').css('display','none')
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）