一个移动端的菜单隐藏与宣示

Question

#apDiv1 {

  z-index: 9999;

    width: 1rem;

    background-color: darkgoldenrod;;

    font-size: .12rem;

    display:none;

    position: fixed;

    top: .4rem;

    right: .15rem;

    border-radius: 5px;

    margin-top: 5px;

    color:#FFFFFF;

}

<button type="button" id="gold-menu-btn"  class="icon-menu"></button>

<div id="apDiv1">

     <ul>

        <li><a href="address.html">编辑地址</a></li>

        <li><a href="record.html">兑换记录</a></li>

        <li><a href="giftpack.html">兑换确认</a></li>

    </ul>     

</div>

   window.onload=function(){

       var btn = document.querySelector('#gold-menu-btn');

var div = document.querySelector('#apDiv1');

btn.addEventListener('click', function(ev) {

  event.stopPropagation();

  if (div.className.indexOf('hide') >= 0) return div.classList.remove('hide');

  div.classList.add('hide');

}, false);

document.addEventListener('click', function(ev) {

  div.classList.add('hide');

}, false);

       }

当我点击btn按钮时；控制下面div的宣示与隐藏；当div宣示时点击页面其他部分能够把div隐藏；移动端的网页；请问这段代码怎么写