css - 如何使用 jquery 实现一个抽屉式导航？

Question

要实现的效果：

下面是主要代码，请大神帮忙看看有什么问题。主要是不知道兼容性如何，例如国内使用比较多的 360浏览器，搜狗浏览器什么的，我都没有办法测试。

HTML:

  <p class="container-fluid hidden-sm hidden-md hidden-lg" id="phonenav">
    <p class="row">
      <p class="col-xs-2">
        <img src="catalog/view/theme/shangfatong/image/public/list.png" class="list">
      </p>
      <p class="col-xs-8 text-center">
        <h5>商法通</h5>
      </p>
      <p class="col-xs-2">
        <img src="catalog/view/theme/shangfatong/image/public/shopping_car.png">
      </p>
    </p>
  </p>

  <nav id="phonemenu" class="hidden-sm hidden-md hidden-lg"></nav>

CSS:

#phonenav {
    border-bottom: 1px solid #316ceb;
    padding-top: 15px;
    padding-bottom: 12px;
    background: #f8f8f8;
}

#phonenav img {
    cursor: pointer;
}

#phonenav h5 {
    margin: 0 auto;
    font-size: 16px;
    color: #212121;
}

#phonemenu {
    width: 0;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #316ceb;
    z-index: 100;
}

JQUERY:

$(document).ready(function() {

    var phonemenu = $("#phonemenu"),
        phonenav  = $("#phonenav .list");

    /* 展开手机导航 */
    phonenav.click(function(event) {
        event.stopPropagation();
        phonemenu.animate({width: '230px'}, 'fast');
    });

    /* 收起手机导航 */
    $(document).click(function(event) {
        if (event.pageX > 230 && phonemenu.css("width") == "230px" ) {
            phonemenu.animate({width: '0'}, 'fast');
            return false;
        }
    });
});

我自己测试了 chrome 、 IE 11 、Firefox 都是正常的。