仅在单击两次后才能激活菜单

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