javascript - 在将事件类添加到 <a> 时隐藏侧导航栏的 <hr> 元素

Question

我有一个侧面导航栏，其中每个 anchor 标记都有一个单独的 <hr> .当用户点击一个链接时，我添加了一个事件类，我已经成功完成了。但我想隐藏 <hr>具有事件类的 anchor 标记。问题是一旦我在事件类上隐藏了 hr，我就无法在另一个 <a> 上显示它。处于事件状态。

<a href="" id="menu">Menu</a>
<a href="landing.php"><i class="fas fa-home"></i>&nbsp&nbsp <strong>Home</strong><hr></a>
<a href="#"><i class="fas fa-chart-bar"></i>&nbsp&nbsp <strong>Report</strong><hr></a>
<a href="#"><i class="fas fa-money-bill-alt"></i>&nbsp <strong>Transaction</strong><hr></a>
<a href="#"><i class="fas fa-address-book"></i>&nbsp&nbsp <strong>Account Master</strong><hr></a>
<a href="#"><i class="fas fa-key"></i></i>&nbsp&nbsp <strong>Change Password</strong><hr></a>
<a href="#"><i class="fas fa-cogs"></i></i>&nbsp&nbsp <strong>Financial Year</strong><hr></a>
<a href="#"><i class="fas fa-sign-out-alt"></i></i>&nbsp&nbsp <strong>Logout</strong><hr></a>

jquery 是:

$(this).addClass("menuActive").siblings().removeClass("menuActive");
$(this).find("hr").hide().siblings().find("hr").show();

正如我在单击其他 <a> 时在图像中显示的那样<hr>报告仍然隐藏。

Answer 1

使用 CSS 规则会更容易:

a.menuActive hr {display:none}

现在您需要在 javascript 中操作的是 menuActive 类； hr 会自行出现和消失。

$(this).addClass("menuActive").siblings().removeClass("menuActive");