javascript - jquery 将 css 设置为不显示后，悬停时显示的下拉菜单不起作用

Question

我有一个包含 display: none 的下拉菜单，当悬停在父项上时，它通过 CSS 包含 display: block。下拉菜单链接到同一页面上的 anchor ，所以当我单击时，我希望下拉菜单消失，所以我点击了

$('.dropdown-menu').css("display", "none")

但是，jquery 现在已经覆盖了悬停时发生的 display: block。如何在单击时隐藏菜单的同时保留以前的功能？

JSFiddle of my code

Answer 1

我添加了另一个功能来再次显示内容并对您的原始内容进行了一些编辑。

https://jsfiddle.net/dc38u09p/6/

$(document).on('click', 'a.hide-on-click', function(event) {
    $('.dropdown-content').hide();
});

$('.dropdown').on('mouseenter', function(){
    $('.dropdown-content').show();
});