jquery - 悬停列表项上的 Bootstrap 导航栏删除类事件，鼠标移开返回类事件

Question

你能帮我如何用 Bootstrap 导航栏实现这种情况吗？正如我在标题中所写，我需要意识到当点击导航栏菜单中的列表项时，当前元素应该激活类并标有顶部边框，但是当鼠标悬停在其他列表项上时，类激活(顶部边框也)应该从中消失具有事件类的当前列表项..

实际上，当鼠标在菜单上移动时，红线会跟随鼠标。当鼠标离开菜单项时，红线返回事件菜单上方

这是我当前的代码 - http://www.bootply.com/uvUwueNuOG

你会注意到 Home 卡处于事件状态，当悬停时，事件类消失并根据鼠标位置移动，但是当单击菜单中的另一张卡时，没有任何反应

Answer 1

你有问题，因为你不应该添加/删除事件类，除非你想让某个元素“事件”。因此，第一步是不要在悬停另一个元素时从“事件”元素中删除 .active。如果你想让 .active 元素失去它的 border-top-color，你需要把它放在你的 CSS 中:

.navbar-default:hover .navbar-nav>.active:not(:hover) > a {
  border-top-color: transparent;
}

确保它在 bootstrap.css 之后加载，否则您将需要更强大的选择器。现在，当菜单悬停时，active 元素不再看起来是active。现在，使用 JavaScript，您可以按预期使用 active 类:标记事件元素。因此，当您想要激活另一个元素时，您可以将其从所有元素中移除并将其应用于您单击的元素。

$(document).ready(function(){
  $('.navbar-default li').on('click', function(){
    $('.navbar-default li').removeClass('active');
    $(this).addClass('active');
  })
});

够好吗？