javascript - 溢出-y : scroll causing issues with JQuery

Question

当我将 overflow-y:scroll 添加到 .nav 样式时，打开导航的按钮需要单击 2 次。将其更改为溢出:无，并且在使用以下 jquery 时只需要按预期单击 1 次:

$(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/

Answer 1

与其检查 .nav 的 width 是否等于 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);
    }
});