Question

这是我正在尝试做的事情：

- 当窗口的宽度小于700px并且用户点击底部的灰色条时，红色菜单将向上滑动并保持在那里。

- 当窗口的宽度超过700px时，当用户点击灰色条时不会发生任何事情。

我将resize（）事件绑定到浏览器窗口，以便在用户在页面加载后调整窗口大小时检测到更改。

这是我的代码： http://codepen.io/Chiz/pen/xwrpWG （不要点击，直到你阅读下面的内容！）

以下是如何产生这个奇怪的问题：

1）在点击上面的Codepen链接之前，将窗口大小调整到700px以下，然后点击我上面的codepen（如果不确定700px有多宽，那么它真的很小）

2）单击底部的灰色条。红色矩形应向上滑动并停止。再次点击。红色矩形向后滑动。再次单击，红色矩形每次上下滑动。这是 CORRECT 行为。

3）现在，调整浏览器宽度，而无需重新加载或刷新codepen。您可以使其更宽或更窄，只要窗口调整大小就无所谓。再次单击灰色条。出现Bug。红色矩形向下滑动 MULTIPLE 次！

有时候，你调整大小的次数越多，它滑动的次数就越多！：-O

我该如何解决这个问题？

//bind click event to the gray bar on page's first load
showMenuIfWidthSmallerThanSevenHundred();

//detect window resizes
$(window).resize(function() {
  showMenuIfWidthSmallerThanSevenHundred();
});


function showMenuIfWidthSmallerThanSevenHundred() {
  if ($(window).innerWidth() <= 700) {
    $("div").on("click", function() {
      /* make menu fill the entire screen that is
      not occupied by the gray bar */
      var nMenuHeight = $(window).height() - $(this).height();

      $(".menu").height(nMenuHeight);

      /* position the menu so that the bottom of the menu
      touches the top of the gray bar */
      $(".menu").css("bottom", $(this).height());

      //make menu slide upwards / downwards
      $(".menu").slideToggle();
    });
  }
}

div {
  width: 100%;
  height: 53px;
  background-color: gray;
  position: absolute;
  bottom: 0;
}
.menu {
  width: 100%;
  height: 100px;
  background-color: #F08080;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

<div class="menu"></div>

Answer 1

你可以进行去抖动以减少事件的发生次数。我推荐Paul Irish的smartresizer，它使用debouces来达到这个目的。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

AS教程说，你可以使用这个简单的监听器：

 $(window).smartresize(function(){
    // code that takes it easy...
 });

您可以去除重击事件，例如调整大小，滚动等等。

Answer 2

好的，在阅读了这里的提示和回复之后，我想我已经把这个问题钉了下来：

http://codepen.io/Chiz/pen/rOwPEm

如果窗口宽度小于700px并且单击灰色条，则红色矩形向上滑动。再次单击时，红色矩形向下滑动。

如果窗口宽度超过700像素，单击灰色条时红色矩形不会向上滑动。如果用户将浏览器宽度调整为大于700px时红色矩形可见，则红色矩形将向下滑动，因为宽度已超过700px。

我喜欢Underscore.js！干杯！

＆＃13;

$(window).resize(_.debounce(function() {
  showMenuIfWidthSmallerThan7Hundred();
}, 500));

function showMenuIfWidthSmallerThan7Hundred() {
  if ($(window).innerWidth() <= 700) {
    $("div").off("click.mynamespace").on("click.mynamespace", function() {
      /* make menu fill the entire screen that is
      not occupied by the gray bar */
      var nMenuHeight = $(window).height() - $(this).height();

      $(".menu").height(nMenuHeight);

      /* position the menu so that the bottom of the menu
      touches the top of the gray bar */
      $(".menu").css("bottom", $(this).height());

      //make menu slide upwards / downwards
      $(".menu").slideToggle();
    });
  }
  //if window is wider than 700px, unbind the click event and slide   the menu back down
  else {
    //check if menu is shown. if yes, make it disappear
    if ($(".menu").css("display") != "none") {
      $(".menu").slideToggle();
    }

    $("div").off("click.mynamespace");
  }
}

＆＃13;

div {
  width: 100%;
  height: 53px;
  background-color: gray;
  position: absolute;
  bottom: 0;
}
.menu {
  width: 100%;
  height: 100px;
  background-color: #F08080;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<div></div>

<div class="menu"></div>

＆＃13;

调整窗口大小时，函数会被多次调用[JQuery]

2 个答案: