Wie JavaScript Javascript wie Medienabfragen auf Maxwidth 751px

Question

zu deaktivieren Ich habe eine Webseite mit einem Nav-Menü mit responsive Design in der Lage, anklickbar zu sein- Ich will das weg sein, wenn ich das Browser-Fenster in Desktopmode, aber nicht machen kann es funktioniert, ich weiß, sollte es eine Möglichkeit geben, es zu wickeln, aber kann es nicht

machen Werk`

Meine html:

<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:

#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

Nicht sicher, was Sie unter "Ich möchte diese weg sein". Meinst du den ganzen HTML, den du oben aufgenommen hast? Wenn Sie Desktop sagen, beziehen Sie sich auf die Größe oder Nicht-Touch-Geräte?

Wenn Sie Größe meinen, würde ich nur eine minimale Breite Medienabfrage hinzufügen und fügen Sie eine Anzeige hinzu: Keine Eigenschaft der Klasse oder ID des Verpackungselements.

Wenn Sie nicht berühren, würde ich etwas wie Modernizr Touch-Erkennung durchführen. Wenn die Bedingung false ist, könnten Sie ein Skript verwenden, um dem Wrapping-Element einen Klassennamen hinzuzufügen. Dieser Klassenname wäre auch in Ihrem CSS mit einer Anzeige: keine Eigenschaft.

EDIT: Wenn Sie wollen einfach Ihre Skripte klicken Handler an einem bestimmten Haltepunkt deaktivieren, so dass sie in einem Zustand wickeln:

$(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"); 
     }); 
    } 
}); 

(nicht getestet)