Question

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

我的要求：

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

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

3）对于屏幕尺寸= <768px，我想模拟Bootstrap折叠行为，因此，当您单击标题时，该元素的“主体”即<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>

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

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

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

Answer 1

问题是您正在调用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;
}

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

编辑

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

编辑2

每个OP请求的更新代码，包括onload调整大小调用。

jQuery slideToggle在调整大小时多次“反弹”

1 个答案: