隐藏侧面导航栏的<hr />元素，有关向<a>

Question

i have a side navbar in which each anchor tag has a separate <hr>. I am adding a active class when user clicks on a link, which I have done successfully. But I want to hide the <hr> of the anchor tag that has the active class. The problem is once I hide the hr on active class I can't show it back when another <a> is active.

<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是：

if/else

正如我在图像中所显示的那样，当我单击其他$(this).addClass("menuActive").siblings().removeClass("menuActive"); $(this).find("hr").hide().siblings().find("hr").show(); 时，报表的<a>仍然隐藏。

Answer 1

使用CSS规则会更容易：

a.menuActive hr {display:none}

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

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

Answer 2

尝试display：none和display：block而不是像这样显示和隐藏：

$("#id").css("display", "none");
$("#id").css("display", "block");