0

CSS3 メディア クエリに基づくレスポンシブ デザインの Web サイトを作成しています ( lessframework)。私が使用しているナビゲーションでは、ホバー時にドロップダウン メニューが表示されますが、画面のサイズが変更されて iPad またはモバイル ビューになると、ナビゲーションを に変更する必要がありonclickます。 .

.live()ウィンドウのサイズが変更されたときにページを更新する必要がないように、コードを何かで変更する必要があります。

コードは次のとおりです。

if ($('body').css('width') === '992px') {
    $('#nav li').hover(function () {
        //show its submenu
        $('ul.sub', this).stop().slideDown(100);
    }, function () {
        //hide its submenu
        $('ul.sub', this).stop().slideUp(100);
    });
    //sub sub menu
    $('#nav ul li').hover(function () {
        $('ul', this).stop().slideDown(100);

    }, function () {
        $('ul', this).stop().slideUp(100);
    });
} else {

    $("ul.sub2>li").click(function () {

        return false;
    });
    $("ul.sub>li").click(function () {

        return false;
    });
    $("ul.sub>li:has(ul.sub2)").click(function () {

        $('.sub2').slideUp();
        $("ul.sub2", this).slideDown();
        return false;
    });

    $("ul#nav>li:has(ul.sub)").click(function () {
        $('.sub').slideUp();
        $('.sub2').slideUp();
        $("ul.sub", this).slideDown();
    });


}
});
4

1 に答える 1

0

Resize は、ウィンドウ サイズが変更されたときに実行できるようにするためにウィンドウ オブジェクトでリッスンする jquery イベントです。たとえば、ウィンドウのサイズ変更時に更新する幅が「iPad の幅かどうか」である場合、変数ストアを使用できます。

var ipad_width = $(window).width() < 992; //ipad_width => true || false

$(window).on('resize', function () {
     ipad_width = $(window).width() < 992
});

ブラウザーのサイズを変更するたびに、より多くのイベントをバインドすることを避けるために、簡単な解決策は、最初からすべてのイベントをバインドし、バインドされた関数内に ipad ビューまたは ipad ではなく実行する必要がある if ステートメントを含めることだと思います見る。例として：

$("ul.sub2>li").click(function () {
    if (ipad_width) {
        return false;
    }
});

と：

$('#nav li').hover(function () {
    if (!ipad_width) {
        //show its submenu
        $('ul.sub', this).stop().slideDown(100);
    }
}, function () {
    if (!ipad_width) {
        //hide its submenu
        $('ul.sub', this).stop().slideUp(100);
    }
});
于 2012-09-23T19:02:13.767 に答える