如何重置滑动切换（）

Question

我正在使用 twitter 引导程序的帮助下的响应式网站，在这种情况下，它采用页脚标题，当屏幕宽度为一定宽度时，它会打开 slideToggle()，这工作正常，但是问题是当我再次增加浏览器大小时，我希望此功能不仅关闭而且重置display:block。

我目前还在学习 jQuery 和 JS，所以它可能是一个显而易见的。

我需要它来工作，所以它不依赖点击来重置它......

这是包括获取屏幕大小在内的完整代码：

        var myWidth = 0, myHeight = 0;
    function getSize(){
            if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
                }   
    }

    getSize(); // run first time
            $(window).resize(function(){
                getSize(); // do it on resize
            });

            $("#footer h3").click(function () {

                if (myWidth < 980) {
                $(this).toggleClass("active");
                $(this).parent().find("ul").slideToggle('medium');  
                }                   
            });

我在想slideDown()，但不知道如何让它自动发生。

Answer 1

在检查屏幕宽度的代码中（也许您仍然可以发布它？）您可以执行以下操作：

if (myWidth < 980) {
    $(this).parent().find("ul").slideDown('medium');
} else {
    $(this).parent().find("ul").slideUp('medium');
}

要更好地控制幻灯片行为，最好使用单独的 slideDown 和 slideUp 方法而不是 slideToggle。在这种情况下，您肯定知道您的 ul 会向上/向下滑动，而不是仅仅切换。

此外，如果窗口宽度在短时间内连续多次超过 980 阈值，您可能需要添加 stop() 方法以避免累积幻灯片动画：

if (myWidth < 980) {
    $(this).parent().find("ul").stop().slideDown('medium');
} else {
    $(this).parent().find("ul").stop().slideUp('medium');
}