cssのメディアクエリがキックされた後、Jqueryスクリプトが動作を停止するように見える

Question

ここにいくつかの問題があります。

スクリプトを実行すると、ウィンドウの幅が800ピクセルを超えると、メニューが読み込まれます。私は800px以下のウィンドウのサイズを変更し、メニューはボタンでスワップアウトされます。しかし、ボタンは機能しません。そして800pxを超えるウィンドウのサイズを変更すると、メニューが再び表示されます。

スクリプトを実行すると、ウィンドウの幅が800px未満になるとボタンが機能します。しかし、私は800pxを超えるウィンドウのサイズを変更し、メニューは表示されません（サイズ変更する前に開いたままにしない限り）。私は再び800px以下のウィンドウのサイズを変更すると、ボタンはまだ動作します。

jQueryの部分は、ウィンドウの幅が800px未満の場合にのみ機能します。

なぜこれが機能しないのでしょうか？

http://jsfiddle.net/y35axgpg/7/

---

ヘルプの更新

おかげで、どうやら今日はあまりにも疲れているし、この時間で働くべきではありません。あなたが私に言ったことは、私はすでに私の心の中に戻って知っていたが、正しい方向にキックが必要だった。

これは私が思い付いたものです：https://jsfiddle.net/y35axgpg/15/

---

jQueryの

if ($("#menu_button").css("display") == "inline-block") { 

    $("#menu_button").click(function() { 
    $("#main_menu").toggle("slide"); 
    }); 

} 

CSS

#main_menu { 
    border: 1px solid #000000; 
    width: 100%; 
    height: 35px; 
    display: block; 
    position: absolute; 
    top: 80px; 
    left: 0; 
} 

#menu_button { 
     display: none; 
    } 

@media screen and (max-width: 800px) { 

    #main_menu { 
    display: none; 
    width: 200px; 
    height: 100%; 
    } 

    #menu_button { 
     display: inline-block; 
    } 

} 

Answer 1

あなた.click()イベントは、バインドされています。

ifの外部にある.click()関数が、そのボタンに常にバインドされるように宣言します。次に.trigger('click')ifの内の.click()の機能が機能します。

例：もちろんhttps://jsfiddle.net/y35axgpg/10/

$("#menu_button").click(function() { 
 
    $("#main_menu").toggle(); 
 
}); 
 

 
if ($("#menu_button").css("display") == "inline-block") { 
 

 
    $("#menu_button").trigger('click') 
 

 
}

#main_menu { 
 
    border: 1px solid #000000; 
 
    width: 100%; 
 
    height: 35px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 80px; 
 
    left: 0; 
 
} 
 

 
#menu_button { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    #main_menu { 
 
    display: none; 
 
    width: 200px; 
 
    height: 100%; 
 
    } 
 
    #menu_button { 
 
    display: inline-block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="menu_button">Menu</button> 
 
<div id="main_menu">[link] | [link] | [link] | [link] | [link]</div>

Answer 2

"スクリプトを実行すると、" 問題があります。このスクリプトは、ページのサイズが変更されたときではなく、ページがロードされたときにのみ実行されます。したがって、800 pxを超えるページをロードすると、イベントリスナーはボタンにバインドされません。

ifステートメントを削除することで、これを修正することができます。この方法では使用できないため、イベントリスナーは常にボタンにバインドされます。画面サイズが800pxを下回っているときのように - 条件がすでに真ある場合にのみ、ページの読み込みに発生する可能性があります - 条件がtrueと評価されたとき