Jquery slideToggle "bounces" 多次调整大小

Question

我对一个简单的 jQuery 脚本有点问题（我不是专家）：

我的要求：

1) 我有多个元素由 - 一个标题 - 一个 body

2) 对于大于 768px 的屏幕，所有元素都是可见的

3) 对于屏幕尺寸 =< 768px 我想模拟 Bootstrap 折叠行为，所以当您单击标题时，元素的 "body"，即 <div class="panel--collapsible" id="panel1"> 变得可见。默认情况下，元素的 body 开头不可见。

我post这里是我目前写的代码

$(document).ready(function() {
  toggleDivOnMobile();
  window.addEventListener('resize', function() {

    toggleDivOnMobile();
  });

});

function toggleDivOnMobile() {
  $('.par-title--collapsible').click(function(e) {
    e.preventDefault();
    var currentAttrValue = $(this).attr('href');
    var content = $(currentAttrValue);
    if (window.outerWidth <= 768) {
      content.slideToggle("slow");     
    }
  });
  return false;
}

.panel--collapsible {
  display: none;
}

@media screen and (min-width:769px) {
  .panel--collapsible {
    display: block!important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="par1" class="collapsible">
  <h2><a href="#panel1" class="par-title--collapsible">Title 1</a></h2>
  <div class="panel--collapsible" id="panel1">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

<div id="par2" class="collapsible">
  <h2><a href="#panel2" class="par-title--collapsible">Title 2</a></h2>
  <div class="panel--collapsible" id="panel2">
    <p>Cuius et cetera</p>
  </div>
</div>

我的问题是：调整 window 大小后，折叠有效，但它 "bounces" 多次。

您可以通过调整 window 的大小来模拟行为。

感谢您的帮助；当然，如果您需要更多信息，请给我留言:)

Answer 1

问题是您正在调用 toggleDivOnMobile，每次 window 调整大小时都会调用它。通过将您的事件处理程序附加到该函数内部，您最终会得到多个事件处理程序都试图做同样的事情，并且他们开始互相争斗。

解决方案是设置一些外部变量并只附加一次事件侦听器，如下所示：

var isMobile = false;

$(document).ready(function() {
  toggleDivOnMobile();
  handleWindowResize();

  window.addEventListener('resize', function() {
       handleWindowResize();
  });
});

function handleWindowResize() {
    isMobile = window.outerWidth <= 768;
}

function toggleDivOnMobile() {
  $('.par-title--collapsible').click(function(e) {
    e.preventDefault();
    var currentAttrValue = $(this).attr('href');
    var content = $(currentAttrValue);
    if (isMobile) {
      content.slideToggle("slow");     
    }
  });
  return false;
}

还有许多其他方法可以完成此操作，但这只是一个开始。如果您想根据 window 大小动态添加和删除事件侦听器，您还可以查看 jQuery .off 函数，但我不建议这样做。

编辑

您可能还想将 isMobile 检查放在一个外部函数中，并在页面加载时调用它；除非浏览器实际调整大小，否则移动浏览器（或任何浏览器，实际上）不会触发调整大小事件。

编辑 2

更新了每个 OP 请求的代码以包含 onload resize 调用。

Jquery slideToggle "bounces" 多次调整大小

Jquery slideToggle "bounces" multiple times on resize

javascript

jquery

slidetoggle