无法使用jquery .hover单击下拉项

Question

大家早上好。希望你今天过得愉快。我有两个按钮和相应的菜单项。默认情况下，菜单容器是隐藏的，只有当光标停留在按钮上时才会显示。

功能似乎工作，除了它不让我点击他们。当我试着去触碰它们的时候，门马上就关上了。好像太近了，但又太远了。我确信它正在发生，因为我只在按钮上使用.hover()。每当光标离开按钮时，容器也会隐藏起来。我该怎么修理它?

我试过使用if statements,.hide() .show()和pure css方法，但似乎没有任何工作。

下面是代码片段:

const list1Btn              = document.querySelector('.nav #by-list1');
const list2Btn             = document.querySelector('.nav #by-list2');
const list1Container        = document.querySelector('.nav .list1-container');
const list2Container       = document.querySelector('.nav .list2-container');
$(list1Btn).hover(() => {
$(list1Container).stop().fadeToggle();
})
$(list2Btn).hover(() => {
$(list2Container).stop().fadeToggle();
})

.nav{
position: relative;
height:100%;
display:flex;
align-items:center;
}
.nav a{
height:100%;
display:flex;
align-items:center;
}
.nav .list1-container,
.nav .list2-container{
position: absolute;
top: 20px;
left: 0px;
background-color: #2e3032;
z-index: 999;
width: 500px;
display: none;
}
.nav .dropdown-flex{
display: flex;
flex-wrap: wrap;
}
.nav .dropdown-flex .dropdown-column{
width: 100%;
flex: 0 50%;
padding: 14px 35px;
}
.nav .dropdown-flex .dropdown-column div{
border-bottom: 1px solid #45484a;
padding-bottom: 2px;
margin-bottom: 8px;
}
.nav .dropdown-flex .dropdown-column a{
margin: 0;
font-weight: 400;
text-transform: none;
font-size: 15px;
letter-spacing: 1px;
font-family: 'Roboto';
}
.nav .dropdown-flex .dropdown-column:nth-child(2) div:last-child a{
font-weight: 900;
color: #ef969a;
}
.nav a{
margin-left: 35px;
text-decoration: none;
color: #c7cacc;
font-weight: 900;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1.4px;
transition: color 0.3s ease-in-out;
position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<a id="by-list1">View List 1</a>
<a id="by-list2">View List 2</a>
<div class="list1-container">
<div class="dropdown-flex">
<div class="dropdown-column">
<div><a href="#">Item 1</a></div>
<div><a href="#">Item 2</a></div>
<div><a href="#">Item 3</a></div>
<div><a href="#">Item 4</a></div>
</div>
</div>
</div>
<div class="list2-container">
<div class="dropdown-flex">
<div class="dropdown-column">
<div><a href="#">Item 7</a></div>
<div><a href="#">Item 8</a></div>
<div><a href="#">Item 9</a></div>
</div>
</div>
</div>
</div>

Answer 1

正如我在评论中提到的，将按钮和菜单放在同一个容器中，并在整个容器上应用.hover()效果。这样，即使你离开按钮并开始悬停在菜单上，你仍然悬停在同一个容器上，所以它不会淡出。

演示:

$(".list-container").hover(function() {
$(this).find(".dropdown-column").fadeToggle()
});
$(".dropdown-column").click( () => alert("Clicked") );

.nav {
position: relative;
display: flex;
align-items: flex-start;
}
.list-container .menuLink {
border: blue dashed 1px;
cursor: pointer;
}
.list-container {
display: flex;
flex-direction: column;
}
.dropdown-column {
display: none;
background: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<div class="list-container">
<a class="menuLink">View List 1</a>
<div class="dropdown-column">
<div><a href="#">Item 1</a></div>
<div><a href="#">Item 2</a></div>
<div><a href="#">Item 3</a></div>
<div><a href="#">Item 4</a></div>
</div>
</div>
<div class="list-container">
<a class="menuLink">View List 2</a>
<div class="dropdown-column">
<div><a href="#">Item 7</a></div>
<div><a href="#">Item 8</a></div>
<div><a href="#">Item 9</a></div>
</div>
</div>
</div>

Answer 2

悬停效果必须放置在按钮和出现的div的公共容器上。

<div class="drop-container">
<div class="drop-button">
</div>
<div class="drop-content">
</div>
</div>

.drop-container:hover .drop-content {
display: initial;
}
.drop-container .drop-content {
position: absolute;
display: none;
}

或者使用jquery显示/隐藏悬停/mouseout下拉菜单