Stoppen Sie JQUERY Skript, wenn die Bildschirmgröße mehr als

Question

ist Wenn Sie einen Blick auf meine Website www.biblio-tech.nl werfen, sehen Sie, dass, sobald Ihre Maus die Menüleiste verlässt, die Elemente verschwinden, dies wird durch das Jquery-Skript verursacht, um einen Akkordeon zu machen Navigation für die mobile Version.

Wenn Sie also Fenster auf mobile Größe ändern/Tablette Breite der Navigation allright so schnell ist, wie Sie es die Größe, es ist weg ..

<div class="navbar"> 
<a id="nav-toggle"><span></span></a> 
<div class="navwrapper"> 
      <div id="dropMenu"> 
      <ul class="level1-menu"> 
       <li><a href="#">3d printing</a> 

       <ul class="level2-menu" id="1"> 
        <li><a href="3d.html">blueprints</a> 
        <ul class="level3-menu"> 
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
        </ul> 
        </li> 
         <li><a href="3d.html">information</a> 
         <ul class="level3-menu"> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
         </ul> 
         </li> 
         <li><a href="3d.html">software</a> 
          <ul class="level3-menu"> 
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
          </ul> 
          </li> 
       </ul> 

       </li> 

       <li><a href="#">computing</a> 

       <ul class="level2-menu" id="2"> 
        <li><a href="3d.html">hardware</a> 
        <ul class="level3-menu"> 
         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
        </ul> 
        </li> 
         <li><a href="3d.html">information</a> 
         <ul class="level3-menu"> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
         </ul> 
         </li> 
         <li><a href="3d.html">software</a> 
          <ul class="level3-menu"> 
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li> 
          </ul> 
          </li> 
       </ul> 

       </li> 

       </li> 
       <li><a href="#">visuals</a></li> 
      </ul> 
       </div> 


</div> 
</div> 

Die HTML

@media screen and (min-width: 280px) and (max-width: 900px){ 

.navwrapper{ 
position: relative; 
top: 19%; 
right: 0; 
width: 100%; 
} 


.navbar { 
    position: fixed; 
    height: 3em; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5); 
} 
#nav-toggle { 
    position: absolute; 
    right: 10px; 
    top: 25%; 
    cursor: pointer; 
    padding: 10px 35px 16px 0px; 
} 

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { 
    cursor: pointer; 
    border-radius: 1px; 
    height: 3px; 
    width: 35px; 
    background: rgba(254,254,254,0.9); 
    position: absolute; 
    display: block; 
    content: ''; 
    opacity: 0.9; 
} 

#nav-toggle span:before { 
    top: -10px; 
} 

#nav-toggle span:after { 
    bottom: -10px; 
} 
#dropMenu{ 
display: none; 
position: relative; 
width: 60%; 
background-color: rgba(0,0,0,0.5); 
top: 100%; 
right: -20%; 
padding: 0; 
transition-property: all; 
transition-duration: .5s; 
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
border-radius: 0 0 0 10px; 
} 

#dropMenu li{ 
    list-style-type : none; 
} 
#dropMenu ul{ 
    padding : 5px; 
} 

#dropMenu ul li{ 
    border-bottom: 1px solid rgba(254,254,254,0.1); 
} 

#dropMenu ul ul li{ 
    font-size: 80%; 
    opacity: 0.8; 
} 

#dropMenu ul ul li:last-child{ 
    border-bottom: none; 
} 

#dropMenu ul ul li:first-child{ 
    border-top: 1px solid rgba(254,254,254,0.1); 
} 

ul.level1-menu li a { 
    text-decoration: none; 
    color: rgba(254,254,254,1); 
    font-weight: 100; 
    font-size: 160%; 
} 

.level2-menu,.level3-menu{ 
    display : none; 
} 
} 

Die oben für Handys/Tablette

@media screen and (min-width: 900px) and (max-width: 1600px){ 
.navbar { 
width: 100%; 
height: 4.5em; 
font-weight: 100; 
position: fixed; 
background-color: rgba(0,0,0,0.5); 
z-index: 100; 
} 

    .navwrapper { 
width: 100%; 
height: 4.5em; 
position: absolute; 
z-index: 100; 
left: 5%; 
} 

    .navbar ul { 
    position: relative; 
    display: inline-block ; 
    list-style: none; 
    font-size: 210%; 
    } 

    .navbar ul li { 
    display: inline-table; 
    width: 4.9em; 
    height: 1.7em; 
    margin: 15px 30px; 
    color: rgba(254,254,254,0.8); 
    } 

    .navbar ul ul { 
    position: absolute; 
    display: none; 
    font-size: 80%; 
    top: 83%; 
    width: 60%; 
    } 

    .navbar ul li:hover ul { 
    display: block; 
    } 

    .navbar ul ul li { 
    position: relative ; 
    min-width: 60%; 
    height: 1%; 
    margin: 0 0; 
    background: rgba(0,0,0,0.5); 
    letter-spacing: 1px; 
    text-indent: 10px; 
    } 

    .navbar ul ul li:hover { 
    background-color: rgba(0,0,0,0.7) 
    } 

    .navbar ul li a { 
    display: block; 
    text-decoration: none; 
    color: rgba(254,254,254,0.8); 
    } 

    .navbar ul li a:hover { 
    opacity: 1; 
    } 


    .navbar ul ul ul { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    color: white; 
    width: 120%; 
    font-size: 60%; 
    letter-spacing: 1px; 
    } 

    .navbar ul ul ul li { 
    display: none; 
    padding: 5px; 
    text-indent: 0px; 
    border-radius: 0px 15px 15px 15px; 
    background-color: rgba(0,0,0,0.7); 
    } 


    .navbar ul ul li:hover > ul li { 
    display: block; 
    } 

    li:last-child { 
    border-radius: 0px 0px 10px 10px; 
    } 

    li:last-child:hover { 
    border-radius: 0px 0px 0px 10px; 
    } 
    } 

Dies ist für Desktop-

$(document).ready(function(){ 
    $("#nav-toggle").click(function(){ 
    event.preventDefault(); 
     $("#dropMenu").slideToggle(1); 
    }); 

     $(".level1-menu > li > a").click(function(){    
     event.preventDefault(); 
      $(this).siblings(".level2-menu").slideToggle(".level2-menu"); 
     }); 


      $("#dropMenu").mouseleave(function(){ 
      event.preventDefault(); 
       $("#dropMenu, .level2-menu").slideUp(1); 
      }); 
}); 

Ich fragte mich, ob es eine Art und Weise gab, in der das Skript nur laden würde, wenn die Bildschirmgröße niedriger als 1300px ist;

Oder eine andere Möglichkeit, dies zu verhindern, wenn Sie mehr von meinem Code brauchen, kann ich es einfügen!

Vielen Dank im Voraus für Ihre Zeit investiert in mir zu helfen.

Herzliche Grüße,

Raymond der Hammer

Answer 1

wenn (was sonst Bedingung & & Screen < 1300) {}

$(document).ready(function(){ 
$("#nav-toggle").click(function(){ 
event.preventDefault(); 
    $("#dropMenu").slideToggle(1); 
}); 

    $(".level1-menu > li > a").click(function(){    
    event.preventDefault(); 
     $(this).siblings(".level2-menu").slideToggle(".level2-menu"); 
    }); 


     $("#dropMenu").mouseleave(function() 
                         { 
     event.preventDefault(); 
     if (screenWidth < 1000){ 
      $("#dropMenu, .level2-menu").slideUp(1);} 
     }); 

});

Link zu Stift: http://codepen.io/damianocel/pen/qZPLGQ

Answer 2

Da Sie jQuery verwenden, können Sie die Größe ändern Methode verwenden.

$(window).resize(function() { 
if($(window).width() <= 500){ // example 
    //do stuff here 
} 
});