当我将overflow-y:scroll添加到.nav样式时,打开导航按钮需要单击两次。将此更改为溢出:无,并且在使用以下jquery时仅需要按一下一下鼠标即可:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
有人可以看到为什么会这样吗,或者我该如何解决呢?
http://jsfiddle.net/9ubxyw0t/2/
最佳答案
而不是检查width
的.nav
是否等于0
,您需要检查它是否小于或等于0
。
您最初的问题似乎只影响某些浏览器。当overflow
属性设置为scroll
时,似乎某些浏览器会为该元素提供负宽度。我想这只是跨浏览器渲染的不一致。
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});