Question

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

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

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

我认为它为每个resize事件运行函数，它正在排队手风琴然后循环它。但我不确定如何最好地订购语法以使其发挥作用。

任何帮助将不胜感激！

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

Answer 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

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

Answer 3

将点击声明移至$(document).ready功能。

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

手风琴循环调整大小

3 个答案: