1

我正在使用 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()，但不知道如何让它自动发生。

4

1 回答 1

1

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

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

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

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

if (myWidth < 980) {
    $(this).parent().find("ul").stop().slideDown('medium');
} else {
    $(this).parent().find("ul").stop().slideUp('medium');
}
于 2013-02-07T17:23:35.150 回答