Question

我正在开发一个响应式网站，借助于Twitter bootstrap，在这种情况下它需要页脚标题，当屏幕宽度为一定宽度时，它会打开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');
}

如何重置slidetoggle（）

1 个答案: