点击按钮，显示隐藏div，点击按钮或空白处隐藏div，点击div里面的内容时div想要显示该怎么做？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>last.html</title>
<style>
.A {
width: 100px;
height: 50px;
background: red;
}
.B {
width: 500px;
height: 500px;
background: blue;
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$ (document).ready (function () {
$ (".A").click (function () {
$ (".B").toggle ();
});
}).click (function (e) {
e = e || window.event;
if (e.target != $ ('.A')[0] && e.target != $ ('.B')[0]) {
$ ('.B').hide ();
}
});
</script>
</head>
<body>
<button class="A">点击按钮</button>
<div class="B">
<div class="lf">
<label for="project_check">项目</label>
<input type="checkbox" id="project_check"/>
</div>
<div class="lf">
<label for="phy_check">物理机</label>
<input type="checkbox" id="phy_check"/>
</div>
<div class="lf">
<label for="image_check">镜像名称</label>
<input type="checkbox" id="image_check"/>
</div>
<div class="lf">
<label for="ip_check">IP地址</label>
<input type="checkbox" id="ip_check"/>
</div>
<div class="lf">
<label for="flavor_check">配置</label>
<input type="checkbox" id="flavor_check"/>
</div>
<div class="lf">
<label for="serve_check">服务状态</label>
<input type="checkbox" id="serve_check"/>
</div>
<div class="lf">
<label for="source_check">电源状态</label>
<input type="checkbox" id="source_check"/>
</div>
<div class="lf">
<label for="task_check">任务</label>
<input type="checkbox" id="task_check"/>
</div>
</div>
</body>
</html>
怎么没有大神指点下啊
$(".A").click(function (e){
$(".B").toggle();
e.stopPropagation();
});
$(".B").click(function(e){
e.stopPropagation();
});
}).click(function(){
$('.B').hide();
});
