要实现的效果:
下面是主要代码,请大神帮忙看看有什么问题。主要是不知道兼容性如何,例如国内使用比较多的 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 都是正常的。
走同样的路,发现不同的人生