1

私はレスポンシブサイトで作業しており、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()ていますが、それを自動的に実現する方法がわかりません。

4

1 に答える 1

1

画面の幅をチェックするコード内で (おそらく、とにかく投稿できますか?)、次のようなことができます。

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

スライドの動作をより詳細に制御するには、slideToggle の代わりに別の slideDown メソッドと slideUp メソッドを使用することをお勧めします。その場合、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 に答える