僅在兩次點擊后激活菜單工作

Question

我有一個菜單，當我單擊某個菜單時，該菜單會變為活動狀態並突出顯示。

代碼運行良好，我不知道這是 blazor 中的問題還是我的代碼中的問題。

但是發生的事情如下，當我打開應用程序並在某些菜單上單擊一次時沒有任何反應，然后如果我再次單擊該菜單只需單擊一下即可開始正常工作

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

遇到此問題的任何人都可以告訴我一種方法可以在打開應用程序時沒有出現兩次單擊的問題

Answer 1

您調用 ActiveTest 的第一次單擊，然后將單擊事件添加到代碼中的所有<li> 。

你可能想要這樣的東西。

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