当我将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);
    }
});

09-30 14:37
查看更多