手风琴循环调整大小答案

【问题标题】：Accordion looping on resize手风琴循环调整大小
【发布时间】：2014-09-02 15:38:08
【问题描述】：

在小于 600 像素的屏幕上查看时，我有一个隐藏在手风琴中的菜单。在大于 600 像素的屏幕上，菜单是可见的。

jsfiddle-http://jsfiddle.net/ashatron/zbzqoz2f/

它工作正常，但是当我将窗口大小调整为大于 600 像素，然后回到小于 600 像素，然后按查看站点地图它循环动画多次。

我认为它为每个调整大小事件运行该函数，该函数将手风琴排队，然后循环它。但我不确定如何最好地订购语法以使其正常工作。

任何帮助将不胜感激！

footernavmenufn = function() {

var current_width = $(window).width();

if (current_width < 600) {
   $('.footer-accordion-head').show();
   $('.footer-accordion-body').hide();

   $('.footer-accordion-head').click(function () {
   $(".footer-accordion-body").slideToggle('400');
  // console.log('hmmm');
return false;
}).next().hide();
} else {
   $('.footer-accordion-head').hide();
   $('.footer-accordion-body').show();
}
};


$(document).ready(function () {
footernavmenufn();
});

$(window).resize(function(){
footernavmenufn();
//console.log('OMG-WHY-YOU-NO-WORK');
 });

【问题讨论】：

每次调用.click() 都会添加另一个绑定。而且，这些都不是不受约束的。因此，通过在低于 600 像素的情况下继续调整窗口大小，您最终可以得到 100 个处理程序，每个处理程序都准备好排队另一个 slideToggle()。

标签： javascript jquery html responsive-design

【解决方案1】：

问题是每次调整窗口大小并满足条件时，您都会绑定一个新的单击事件处理程序，因此一段时间后会有多个事件处理程序导致混乱。理想情况下，您的代码应该类似于

$(document).ready(function () {
  $('.footer-accordion-head').click(function () {
    $(".footer-accordion-body").slideToggle('400');
    console.log('hmmm');
    return false;
  });
  $(window).resize(footernavmenufn);
  footernavmenufn(); // or $(window).trigger("resize");
});

footernavmenufn = function () {

  var current_width = $(window).width();

  if (current_width < 600) {
    $('.footer-accordion-head').show();
    $('.footer-accordion-body').hide();
  } else {
    $('.footer-accordion-head').hide();
    $('.footer-accordion-body').show();
  }
};

Updated Fiddle

【讨论】：

太棒了！那是一种享受！非常感谢伙计！所以你所做的就是分离出点击滑动切换和宽度查询。因此单击滑动切换仅在文档中准备就绪，但宽度查询正在调整大小，因此它不会在每个调整大小事件上运行滑动切换......我想我知道它是如何工作的，谢谢老兄！ :D $(window).resize(function(){
$(window).resize(function(){ footernavmenufn(); });和 $(window).resize(footernavmenufn); footernavmenufn();不知道有什么区别：/
好吧，在第一种情况下，您是在匿名函数中手动调用函数...在第二种情况下，您要执行的函数将被直接调用，您可以避免额外的函数调用和代码会更干净..仅此而已.. :)

【解决方案2】：

为什么你有这个代码？疯狂的一个。删除它：

if (current_width < 600) {
   $('.footer-accordion-head').show();
   $('.footer-accordion-body').hide();

   $('.footer-accordion-head').click(function () {
   $(".footer-accordion-body").slideToggle('400');
   return false;
}

【讨论】：

【解决方案3】：

将点击声明移动到$(document).ready函数中。

目前每次调整页面大小时，都会再次添加点击功能 - 因此每次调整页面大小时重复一次。 forked jsfiddle with change

【讨论】：