Question

我已经设置了三列，以便为更小的屏幕进入手风琴。我使用的是此处推荐的方法： Responsive content to accordion

我的问题是我在其中一个手风琴中标注了内容（使用基本标签），当你点击其中一个标签时，它不会只显示该标签的内容，而是关闭手风琴。我认为脚本（下面）只允许h3切换手风琴，但显然不是。或者，也许基础脚本覆盖？任何想法。

这是手风琴剧本：

$(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/ 点击“日历”，然后选择日历内容的过滤器（例如田径）。

非常感谢您的时间！

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

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

响应式标签内容为手风琴 - 当点击标签时，手风琴会关闭

1 个答案: