maxwidth 751pxのメディアクエリのようにjavascriptを無効にする方法

Question

ブラウザメニューをデスクトップモードにしてもクリックできないようにするために、レスポンスデザインのnavメニューをWebページに作成しました。

<div> <a href="#" title="cart"> <img src="img/svg/cart_icon.svg" alt="cart"></a> <a href="#" title="Search"> <img src="img/svg/search_icon.svg" alt="Search"></a> <a href="#" title="Log in"> <img src="img/svg/log_in.svg" alt="Log In"></a> </div> 
    <div class="logotype"><a href="index.html"> <img src="img/svg/k_logo.svg" alt="K"></a> </div> 
    <div> 
    <nav id="MainNavigation"> <a href="#" id="menuIcon"><img src="img/svg/menu_icon.svg" alt="Menu icon"></a> <a href="contact.html" id="contactUs"><img src="img/svg/contact_icon.svg" alt="Contact us"></a> 
     <ul id="dropDownMenu"> 
     <li> <a href="index.html" title="Home">Home</a></li> 
     <li> <a href="women.html" title="Women" id="womenId">Women</a> <a href="#" class="Sub_Menu_Link"><span class="float_Right"><img src="img/svg/Sub_menu_expander.svg" alt="+"></span></a> 
      <ul class="sub_Menu"> 
      <li><a href="gallery.html">Coats</a> </li> 
      <li><a href="gallery.html">Tops</a> </li> 
      <li><a href="gallery.html">Dresses</a> </li> 
      <li><a href="gallery.html">Trousers</a> </li> 
      <li><a href="gallery.html">Shoes</a> </li> 
      </ul> 
     </li> 
     <li> <a href="#" title="Men" id="menId">Men</a> <a href="#" class="Sub_Menu_Link"><span class="float_Right"><img src="img/svg/sub_menu_expander.svg" alt="+"></span></a> 
      <ul class="sub_Menu"> 
      <li><a href="#">Coats</a> </li> 
      <li><a href="#">Tops</a> </li> 
      <li><a href="#">Dresses</a> </li> 
      <li><a href="#">Trousers</a> </li> 
      <li><a href="#">Shoes</a> </li> 
      </ul> 
     </li> 
     <li><a href="#" title="Sale">Sales</a></li> 
     <li><a href="contact.html">Contact us</a></li> 
     <li><a href="#">Log in</a></li> 
     </ul> 
    </nav> 
    </div> 
    <hr> 
</header> 

CSS：それは私がそれをラップするいくつかの方法でなければなりませんが、それは

マイHTML work`ことはできません知っている、仕事

#pageHeader { 
    position: fixed; 
    display: block; 
    background: white; 
    z-index: 1; 
    width: 100%; 
    top: 0; 
    margin-bottom: 0; 
} 
.logotype img { 
    display: block; 
    width: 40px; 
    height: 50px; 
    margin: 0px auto; 
} 
#pageHeader img{ 
    width: 30px; 
    height: 40px; 
    } 
#pageHeader div { 
    float: right; 
    width: 33.33%; 
} 
#pageHeader div:first-of-type a { 
    position: relative; 
    float: right; 
    padding-right: 20px; 
    top:5px; 
} 
#pageHeader div:first-of-type a::after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
#pageHeader div::after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
#pageHeader nav>a { 
    display: block; 
    padding: 0 0 0 20px; 
    position: relative; 
    top: 10px; 
} 
#pageHeader nav ul.open { 
    display: block; 
} 
#pageHeader nav ul ul.open { 
    display: block; 
} 
#pageHeader nav ul li a { 
    color: #161212; 
} 
#pageHeader nav ul { 
    display: none; 
    ; 
} 
#pageHeader nav ul ul { 
    position: relative; 
    display: none; 
} 
#pageHeader nav >ul a { 
    padding: 0px 0px 0px 0px; 
} 
#pageHeader nav ul ul a { 
    padding: 0 0px 0 0px; 
} 
#pageHeader nav>ul { 
    margin: 0; 
    padding: 0 20px; 
    float: left; 
    line-height: 40px; 
    background: #fff; 
    width: 40%; 
    position: absolute; 
} 
#pageHeader nav ul ul { 
    background: #fff; 
    width: 100%; 
} 
#pageHeader hr { 
    border: 0; 
    clear: both; 
    display: block; 
    width: 100%; 
    background-color: #ccc; 
    height: 1px; 
} 
.Sub_Menu_Link { 
    line-height: 1px; 
} 
.Sub_Menu_Link:after { 
    content: ""; 
    display: block; 
    visibility: hidden; 
    clear: both; 
} 
.float_Right img { 
    width: 10px; 
} 
.float_Right { 
    float: right; 
} 
.float_Right:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 

/* förändard */ 
#MainNavigation ul >li a { 
    font-size: 1.2rem; 
    color: #000; 
} 
#MainNavigation ul ul>li a { 
    color: #000; 
    line-height: 1px; 
    font-size:.9rem; 

Javascriptを

// JavaScript Document 
$(document).ready(function(){ 
"use strict"; 


    $("nav>a").on("click", function(){ 

    $("nav > ul").toggleClass("open"); 
    }); 


    $(" .Sub_Menu_Link").on("click", function(){ 
      $(this).next().toggleClass("open"); 
      });    
}); 

mediaQ

@media (min-width:751px) { 
/*-- generic settings --*/ 
#pageContainer { 
    width: 80%; 
    margin: 0px auto; 
} 
/*-- main #pageHeader --*/ 

#pageHeader { 
    position:relative; 
    display:block; 
} 

#pageHeader> div a:nth-child(3) { 
    display: block; 
} 
    #MainNavigation{ 
    width:100%; 

    } 
    #MainNavigation ul{ 
     background:red; 
    } 

#MainNavigation >a:first-of-type { 
    display: none; 
} 


#dropDownMenu li:hover ul { 
    display: block; 

} 

.sub_Menu { 
    position: absolute; 
    display: none; 
    width: 20%; 
    text-align: left; 
    z-index: 1; 

} 

#pageHeader { 
    width: 80%; 
    margin: 2% auto 0; 
} 
#contactUs { 
    display: block; 
} 
#pageHeader div:first-of-type a { 
    padding: 0px 0px 0 20px; 
} 
#pageHeader nav>a { 
    display: block; 
    padding: 0 0 0 0px; 
} 

Answer 1

ないあなたは、 "私はこれがなくなってしたい" によって何を意味するか確認してください。上記のすべてのHTMLを意味しますか？また、デスクトップと言えば、サイズや非タッチデバイスを指していますか？

サイズを意味する場合は、最小幅のメディアクエリを追加して、ラッピング要素のクラスまたはIDにdisplay：noneプロパティを追加します。

ノンタッチを意味する場合、私はModernizrのようなものを使用してタッチ検出を実行します。条件がfalseの場合、スクリプトを使用してラップ要素にクラス名を追加できます。そのクラス名はdisplay：noneプロパティを持つCSSにもあります。

EDIT：あなたは、単にあなたのスクリプトを無効にしたい場合は、特定のブレークポイントでハンドラをクリックした状態でそれらをラップ：

$(document).ready(function(){ 
"use strict"; 
    var breakPoint = 751; 
    if ($(window.width() >= breakPoint) { 
     $("nav>a").on("click", function(){ 

      $("nav > ul").toggleClass("open"); 
     }); 

     $(" .Sub_Menu_Link").on("click", function(){ 
      $(this).next().toggleClass("open"); 
     }); 
    } 
}); 

（テストしていません）