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

Question

#app1 {
  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>
<p id="app1">
     <ul>
        <li><a href="address.html">编辑地址</a></li>
        <li><a href="record.html">兑换记录</a></li>
        <li><a href="giftpack.html">兑换确认</a></li>
    </ul>     
</p>
   window.onload=function(){
       var btn = document.querySelector('#gold-menu-btn');
var p = document.querySelector('#app1');

btn.addEventListener('click', function(ev) {
  event.stopPropagation();
  if (p.className.indexOf('hide') >= 0) return p.classList.remove('hide');
  p.classList.add('hide');
}, false);

document.addEventListener('click', function(ev) {
  p.classList.add('hide');
}, false);
       }

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

Answer 1

原理和桌面端都一样，甚至连事件都可以写的一样

点击预览效果和看代码
https://jsfiddle.net/vzx8pcL7/

Answer 2

js jq

Answer 3

其实在写移动端的时候区别于PC端的项目的话就是有meta标签，单位还有一些需要注意的地方，动画的话我建议使用css3的方式来写，PC上面一些动画在手机端上面会有可见的卡顿。