Tengo un menú que cuando hago clic en algo, el menú se activa y se resalta.
El código funciona bien, no sé si es un problema en el blazor o es algo en mi código de todos modos.
Pero lo que pasa es lo siguiente, cuando abro la aplicación y hago clic una vez en algunos de los menús no pasa nada, luego si vuelvo a hacer clic el menú comienza a funcionar normalmente con solo un clic
Código HTML:
<div> <ul class="nav" onclick="ActiveTest()"> <li> <a href="#" class="active"> <i class="fas fa-home"></i> <span class="name">Home</span> </a> </li> <li> <a href="#"> <i class="fas fa-book-reader"></i> <span class="name">Reader</span> </a> </li> ... </ul> </div>JS:
function ActiveTest() { $(".nav li a").click(function () { $(".nav li a").removeClass("active"); $(this).addClass("active"); }); }Cualquiera que haya tenido este problema puede decirme una forma de hacer que esto funcione sin este problema de dos clics cuando se abre la aplicación.
El primer clic al que llama ActiveTest, que luego agrega el evento de clic a todos los <li> en su código.
Probablemente quieras algo como esto en su lugar.
HTML
<div class="bar"> <ul class="nav"> <li > <a href="#" onclick="OpenMenu(this)" class="active"> <i class="fas fa-home"></i> <span class="name">Home</span> </a> </li> <li> <a href="#" onclick="OpenMenu(this)"> <i class="fas fa-book-reader"></i> <span class="name">Reader</span> </a> </li> </ul> </div>JS
function OpenMenu(el) { $(".nav li a").removeClass("active"); $(el).addClass("active"); }