要实现的效果：

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

HTML:

 
 
  
 
 
商法通
 
 
  
 
 
 

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 都是正常的。