jQuery Hover-Funktion nach Fenstergröße kann nicht in Klick-Funktion geändert werden

Question

Ich habe ein Menü mit zwei Zuständen im Hinterkopf - auf Größe größer oder gleich 1025px, die Dropdown-Untermenüs werden durch Schweben auf ihnen geöffnet und das ist in Ordnung, auf der andere Seite, auf Größe weniger als 1025px, werden die Untermenüs geöffnet, indem man sie anklickt. Das Problem ist im letzteren Fall, wenn die Größe des Browsers auf weniger als 1025 Pixel geändert wird, bleibt die Hovering-Funktion erhalten, und erst nach dem Aktualisieren des Browsers kommt die Klick-Funktion zum Tragen und alles ist in Ordnung, bis ich den Browser wieder größer als 1025px Größe und dann wenn es wieder Größe kleiner als 1025px Größe.

Ich würde etwas Hilfe schätzen.
Danke,
CP

$(function() { 
 
    var isMobile = false; 
 
    $(window).resize(function() { 
 
    if ($(window).width() >= 1025) { 
 
     isMobile = false; 
 
     $('nav li').hover(
 
     function() { 
 
      $('ul', this).stop().slideToggle(150); 
 
     }); 
 
    } else { 
 
     isMobile = true; 
 
     $("nav li").click(function() { 
 
     $('ul', this).stop().slideToggle(150); 
 
     }); 
 
    }; 
 
    }); 
 
    $(window).resize(); // Trigger window resize to check on load 
 
});

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500); 
 

 
/* main Styles */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    background: #fafafa; 
 
    font-family: "Roboto", sans-serif; 
 
    font-size: 14px; 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.container { 
 
    width: 1000px; 
 
    margin: auto; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    margin-top: 150px; 
 
} 
 

 

 
/* Navigation Styles */ 
 

 
nav { 
 
    background: #2ba0db; 
 
} 
 

 
nav ul { 
 
    font-size: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 

 
nav ul li { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
nav ul li a { 
 
    color: #fff; 
 
    display: block; 
 
    font-size: 14px; 
 
    padding: 15px 14px; 
 
    transition: 0.08s linear; 
 
} 
 

 
nav ul li:hover { 
 
    background: #126d9b; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    border-bottom: 5px solid #2ba0db; 
 
} 
 

 
nav ul li ul li { 
 
    border-top: 1px solid #444; 
 
    display: block; 
 
} 
 

 
nav ul li ul li:first-child { 
 
    border-top: none; 
 
} 
 

 
nav ul li ul li a { 
 
    background: #373737; 
 
    display: block; 
 
    padding: 10px 14px; 
 
} 
 

 
nav ul li ul li a:hover { 
 
    background: #126d9b; 
 
} 
 

 
nav .fa.fa-angle-down { 
 
    margin-left: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <div class="container"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li> <a href="#">Categories<i class='fa fa-angle-down'></i></a> 
 
     <ul> 
 
      <li><a href="#">Category One</a></li> 
 
      <li><a href="#">Category Two</a></li> 
 
      <li><a href="#">Category Three</a></li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="#">Services<i class='fa fa-angle-down'></i></a> 
 
     <ul> 
 
      <li><a href="#">Service One</a></li> 
 
      <li><a href="#">Service Two</a></li> 
 
      <li><a href="#">Service Three</a></li> 
 
      <li><a href="#">Service Four</a></li> 
 
      <li><a href="#">Service Five</a></li> 
 
      <li><a href="#">Service Six</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

Sie nie die alten Event-Handler zu entfernen, wenn der Browser die Größe, sind Sie nur mehr Event-Handler jedes Mal hinzufügen. Wenn eines dieser Ereignisse eintritt, führt es alle Handler aus.

Anstatt Ereignishandler innerhalb des .resize() Handlers zu binden, binden Sie sie einmal und lassen Sie sie die isMobile Variable überprüfen, um zu entscheiden, ob etwas zu tun ist.

$(function() { 
 
    var isMobile = false; 
 
    $('nav li').hover(function() { 
 
    if (!isMobile) { 
 
     $('ul', this).stop().slideToggle(150); 
 
    } 
 
    }).click(function() { 
 
    if (isMobile) { 
 
     $('ul', this).stop().slideToggle(150); 
 
    } 
 
    }); 
 
    $(window).resize(function() { 
 
    isMobile = $(window).width() < 1025; 
 
    }); 
 
    $(window).resize(); // Trigger window resize to check on load 
 
});

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500); 
 

 
/* main Styles */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    background: #fafafa; 
 
    font-family: "Roboto", sans-serif; 
 
    font-size: 14px; 
 
    margin: 0; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.container { 
 
    width: 1000px; 
 
    margin: auto; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    margin-top: 150px; 
 
} 
 

 

 
/* Navigation Styles */ 
 

 
nav { 
 
    background: #2ba0db; 
 
} 
 

 
nav ul { 
 
    font-size: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 

 
nav ul li { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
nav ul li a { 
 
    color: #fff; 
 
    display: block; 
 
    font-size: 14px; 
 
    padding: 15px 14px; 
 
    transition: 0.08s linear; 
 
} 
 

 
nav ul li:hover { 
 
    background: #126d9b; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    border-bottom: 5px solid #2ba0db; 
 
} 
 

 
nav ul li ul li { 
 
    border-top: 1px solid #444; 
 
    display: block; 
 
} 
 

 
nav ul li ul li:first-child { 
 
    border-top: none; 
 
} 
 

 
nav ul li ul li a { 
 
    background: #373737; 
 
    display: block; 
 
    padding: 10px 14px; 
 
} 
 

 
nav ul li ul li a:hover { 
 
    background: #126d9b; 
 
} 
 

 
nav .fa.fa-angle-down { 
 
    margin-left: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <div class="container"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li> <a href="#">Categories<i class='fa fa-angle-down'></i></a> 
 
     <ul> 
 
      <li><a href="#">Category One</a></li> 
 
      <li><a href="#">Category Two</a></li> 
 
      <li><a href="#">Category Three</a></li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="#">Services<i class='fa fa-angle-down'></i></a> 
 
     <ul> 
 
      <li><a href="#">Service One</a></li> 
 
      <li><a href="#">Service Two</a></li> 
 
      <li><a href="#">Service Three</a></li> 
 
      <li><a href="#">Service Four</a></li> 
 
      <li><a href="#">Service Five</a></li> 
 
      <li><a href="#">Service Six</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>