6

書き込もうとしているjQueryで多くの問題が発生しています。常に1つの関数を使用できるようにする必要があり、ユーザーウィンドウが設定された幅よりも大きい場合に1つの関数を使用できるようにする必要があります。これが私の関数です。どちらも実行されていますjQuery(document).ready(function($){

ドロップダウンメニューの機能は、ウィンドウが設定された量よりも大きい場合にのみ発生します。

//the dropdown code for desktop users
function largeDropDown(){
    $('#nav ul li').hover(
    //open
    function(){ $(this).find('ul').stop().slideDown(300); },
    //close
    function(){ $(this).find('ul').stop().slideUp(300); }
    );
}

そして、これはいつでも利用できますが、これを画面サイズに応じて調整する方法を知っておくと便利です。

//the dropdown code for smaller screens
$('a.menu_trigger').click(openMenu);
function openMenu(e){
    e.preventDefault();
    if($(this).next('ul').hasClass('open_menu')){
        $(this).next('ul').slideUp(300).removeClass('open_menu');
        $(this).html("↓");
    } else {
        $(this).next('ul').slideDown(300).addClass('open_menu');
        $(this).html("↑");
    }

}

CSSメディアクエリを使用a.menu_triggerすると、ウィンドウが768pxを超えると、が非表示になります。そうすれば、jQueryは何もしません（少なくとも、これを機能させるための私の試みです！）

そこで、最初の関数を768px以上で機能させる方法と、ウィンドウのサイズ変更時にこの関数を呼び出す方法を知りたいと思います。どんな助けでも素晴らしいでしょう！ありがとう。

4

3 に答える 3

24

次のようにして、ウィンドウのサイズ変更イベントをバインドできます。

$(window).on('resize', function(event){
    // Do stuff here
});

次のようにして、ウィンドウのサイズを取得できます。

var windowWidth = $(window).width();
if(windowWidth > 768){
    // Do stuff here
}

これは、すべての動作を確認するための jsfiddleです。

ウィンドウのサイズ変更イベントで何をバインドするかに注意してください。ユーザーがブラウザのサイズを自然に変更すると、最終的に何十回も実行される可能性があります。コードが重いと、ユーザー エクスペリエンスが低下します。

于 2013-01-24T14:57:41.520 に答える
1

これにより、関数を実行するたびにウィンドウ サイズがチェックされます。ウィンドウが 768px 未満の場合、メニューを開いて先に進みます。768px より大きい場合は何もしません (ティガーに行きましょう!)。

function openMenu(e){
    if ( $(window).width() < 768 ) {
        e.preventDefault();
        if($(this).next('ul').hasClass('open_menu')){
            $(this).next('ul').slideUp(300).removeClass('open_menu');
            $(this).html("&darr;");
        } else {
            $(this).next('ul').slideDown(300).addClass('open_menu');
            $(this).html("&uarr;");
        }
    } else {
        return false;
    }
}

編集:特定のビューポート幅でコードを実行するために使用しているマイクロライブラリを追加したかった; これにより、JavaScript でメディア クエリを活用できるようになります。enquire.jsをチェックすることをお勧めします。

于 2013-01-24T14:57:31.303 に答える