手风琴响应式选项卡式内容 - 点击选项卡时手风琴关闭

我已经设置了三栏以转移到小型屏幕的手风琴中。我使用推荐的方法在这里： 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/ 点击“日历”，然后选择日历内容的过滤器（如田径。）

非常感谢你的时间！

来源

2014-09-22 MsMaryMak

'未捕获的ReferenceError：winIsSmall未定义' – 2014-09-29 20:00:43

认识到它是我使用的标签上的回调导致了问题。有什么我可以补充的，这将保持手风琴开放？ – MsMaryMak 2014-10-14 21:36:27

发现这里发生了什么。我用了一个回调函数张贴在这里： 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'); 
    } 
    } 
});

由于在这个基础后，最后评议。

来源

2014-10-14 21:51:17 MsMaryMak

手风琴响应式选项卡式内容 - 点击选项卡时手风琴关闭

回答

相关问题