求大神帮忙 经过div1的子元素来控制div2的显示和隐藏

求大神帮忙 通过div1的子元素来控制div2的显示和隐藏
<div id="manner">
<div id="nav">
  <ul>
<li><a>音乐</a></li>
<li><a>娱乐</a></li>
<li><a>体育</a></li>
<li><a>更多</a></li>
</div>
<div id="nav-z">
  <ul>
<li><a>综艺</a></li>
<li><a>明星</a></li>
   </ul>
</div>
 </div>
<p>通过点击“<li><a>更多</a></li>”来控制<div id="nav-z">的显示和隐藏</p>
<p>   <div id="nav-z">显示时，点击其中链接或网页任意位置隐藏<div id="nav-z">   </p>
<p>本人菜鸟！最好是完整的代码</p>
------解决思路----------------------

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<div id="manner">

<div id="nav">

  <ul>

<li><a>音乐</a></li>

<li><a>娱乐</a></li>

<li><a>体育</a></li>

<li><a href="javascript:void 0" id="bg">更多</a></li>

</div>

<div id="nav-z" style="display: none;">

  <ul>

<li><a>综艺</a></li>

<li><a>明星</a></li>

   </ul>

</div>

 </div>

<script type="text/javascript">

$("#bg").click(function(event){

	$("#nav-z").toggle();

	event.stopPropagation();

});

$(document).click(function(event){

	$("#nav-z").hide();

});