javascript - Jquery slideToggle在调整大小时多次“反弹”

问题描述

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

我的要求：

1）我有多个元素组成 - 一个标题 - 一个身体

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

3) 对于屏幕尺寸 =< 768px 我想模拟 Bootstrap Collapse 行为，因此当您单击标题时，元素的“主体”即<div class="panel--collapsible" id="panel1">变为可见。默认情况下，元素的主体在开始时是不可见的。

我在这里发布我到目前为止写的代码

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

我的问题是：调整窗口大小后，折叠有效，但它“反弹”了多次。

您可以通过调整窗口大小来模拟行为。

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

标签： javascriptjqueryslidetoggle

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

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

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;
}

还有很多其他方法可以实现这一点，但这只是一个开始。.off如果您想根据窗口大小动态添加和删除事件侦听器，您也可以查看 jQuery函数，但我不建议这样做。

编辑

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

编辑 2

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

javascript - Jquery slideToggle在调整大小时多次“反弹”

问题描述

解决方案

推荐阅读