点击onclick显示出了一个div容器。现在我要在别的地方点击时消失应该怎么处理？
1个回答
展开全部
<head>
<title>菜单隐藏-显示</title>
<style>
*{margin:0; padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
.lflort{float:left;}
.rfloat{float:right;}
/*样式开始*/
#nav{width:241px; background:#09C;}
.mingp{font-size:20px; background:#03F; height:80px; line-height:80px; padding-left:20px; color:#FFF;}
#nav ul li{border-bottom:#03F 1px solid;}
#nav ul li a{padding-left:20px; color:#FFF; font-size:17px; display:block; height:60px; line-height:60px; background:#09C;}
#nav ul li a:hover{background:#06C;}
#menu{width:100px; height:50px; line-height:50px; background:#06F; text-align:center; color:#FFF; margin-top:20px; margin-left:10px;}
#menu a{color:#FFF;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script><!--链接jquery库文件-->
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hide();
});
function show(){
$("#nav").show(180,function(){
/*鼠标点击空白处隐藏元素*/
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#nav").length == 0){
$("#nav").hide();
$("#menu").show();
}
});
/*鼠标点击空白处隐藏元素结束*/
});
$("#menu").hide();
};
</script>
</head>
<body>
<!--代码开始-->
<div class="head">
<div id="nav" class="lflort">
<div class="mingp">我的名片</div>
<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>
</div>
<div id="menu" class="lflort" onmousedown="show()"><a href="#">菜单</a></div>
</div>
<!--代码结束-->
</body>
</html>
你看一下，这个可以不，可以用的话，你自己可以修改div布局，望采纳
<title>菜单隐藏-显示</title>
<style>
*{margin:0; padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
.lflort{float:left;}
.rfloat{float:right;}
/*样式开始*/
#nav{width:241px; background:#09C;}
.mingp{font-size:20px; background:#03F; height:80px; line-height:80px; padding-left:20px; color:#FFF;}
#nav ul li{border-bottom:#03F 1px solid;}
#nav ul li a{padding-left:20px; color:#FFF; font-size:17px; display:block; height:60px; line-height:60px; background:#09C;}
#nav ul li a:hover{background:#06C;}
#menu{width:100px; height:50px; line-height:50px; background:#06F; text-align:center; color:#FFF; margin-top:20px; margin-left:10px;}
#menu a{color:#FFF;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script><!--链接jquery库文件-->
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hide();
});
function show(){
$("#nav").show(180,function(){
/*鼠标点击空白处隐藏元素*/
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#nav").length == 0){
$("#nav").hide();
$("#menu").show();
}
});
/*鼠标点击空白处隐藏元素结束*/
});
$("#menu").hide();
};
</script>
</head>
<body>
<!--代码开始-->
<div class="head">
<div id="nav" class="lflort">
<div class="mingp">我的名片</div>
<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>
</div>
<div id="menu" class="lflort" onmousedown="show()"><a href="#">菜单</a></div>
</div>
<!--代码结束-->
</body>
</html>
你看一下，这个可以不，可以用的话，你自己可以修改div布局，望采纳
追问
用JavaScript可以吗？请问下！我现在主要是JavaScript都还没怎么学会，用jQuery对我来说有点牵强了！能用JavaScript实现，一定采纳！谢谢了
追答
额，可是我不会javascript啊~~我直接学的jquery，jquery比较简单方便，用javascript的话，太麻烦了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
