手风琴的响应式选项卡式内容 - 单击选项卡时手风琴关闭答案

【问题标题】：Responsive tabbed content to accordion - accordion closes when tab clicked手风琴的响应式选项卡式内容 - 单击选项卡时手风琴关闭
【发布时间】：2014-09-22 20:52:16
【问题描述】：

我已经设置了三个栏来移动到一个手风琴式的小屏幕。我正在使用这里推荐的方法： Responsive content to accordion

我的问题是我在其中一个手风琴中设置了标签内容（使用 Foundation 选项卡），当您单击其中一个选项卡时，它会关闭手风琴，而不是只显示该选项卡的内容。我认为脚本（如下）只允许 h3 切换手风琴，但显然不是。或者，也许 Foundation 脚本被覆盖了？任何想法。

这里是手风琴脚本：

$(function(){

  var winIsSmall;
  $(window).on('load resize', homeAccordion );

  function homeAccordion() {
    winIsSmall = window.innerWidth < 641;
    $('.columns .mobslider').toggle(!winIsSmall);
  }

  $('.columns').find('h3').click(function () {
    if(winIsSmall){
        $(this).parent().find('.mobslider').stop().slideToggle();
    }
  });

});

以下是在小屏幕尺寸下查看时出现问题的页面： http://www.easternflorida.edu/ 点击“日历”，然后为日历内容选择一个过滤器（例如田径运动。）

非常感谢您的宝贵时间！

【问题讨论】：

Uncaught ReferenceError: winIsSmall is not defined
意识到这是我正在使用的选项卡上的回调导致问题。有什么可以让手风琴保持打开状态的东西吗？

标签： javascript jquery tabs zurb-foundation accordion

【解决方案1】：

发现这里发生了什么。我使用了此处发布的回调函数： https://github.com/zurb/foundation/issues/4611

它正在调整窗口大小并导致切换的 div 恢复到默认状态。

我刚刚更改了回调：

$(document).foundation({
  tab: {
    callback : function (tab) {
      $(window).trigger('resize');
    }
  }
});

到这里：

$(document).foundation({
  tab: {
    callback : function (tab) {
      $(document).foundation('equalizer');
    }
  }
});

感谢该基金会帖子的最后评论者。

【讨论】：