激活两次点击后才工作的菜单

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