Javascript 下拉菜单不支持'；关门后不要开门

我用css制作了一个下拉菜单，但当你点击它时它不会关闭。所以我添加了这个函数：

$(".map-button li ul li").on("click", function(){
    $(this).parent().hide();
});

当我点击它时它关闭，但当我悬停时它不再打开

这是我用CSS在上面悬停时打开它的方法：

.map-button li:hover ul{
  display: block;
  opacity: 1;
  visibility: visible;
}

菜单结构：

<ul class="map-button">
  <li>Choose item
    <ul style="display: none;">
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>                 
    </ul>
   </li>
</ul>

选择项目

第1项
第2项

jQuery

hide（）

设置

显示：无

，但需要设置

可见性：隐藏

：

$(this).parent().css({ visibility: 'hidden' });

---

您需要添加另一个处理程序：

 $(".map-button li").mouseenter(function(){
    $(".map-button li ul").show(); 
  });

  $(".map-button li").mouseleave(function(){
    $(".map-button li ul").hide(); 
  });

---

考虑使用所有JS实现（比如@Beri suggest），但如果您想使用CSS

：hover

来显示列表：

在CSS中添加规则：

.map-button > li ul{
    display:none;
}
.map-button > li:hover ul{
  display: block;
}

并删除HTML中的

style=“display:block”

<ul class="map-button">
  <li>Choose item
    <ul>
        <li data-id="1">Item 1</li>
        <li data-id="2">Item 2</li>                 
    </ul>
   </li>
</ul>

选择项目

第1项
第2项

JS还可以

---

不能将鼠标悬停在未显示的元素上。你刚刚将它的显示设置为“无”。你能解决这个问题吗？这就是我需要的！唯一的问题是我有两个带有class.map按钮的下拉列表，所以当我悬停它时，它会同时打开这两个按钮。我尝试使用

$（this）.find（'ul'）.hide（）

和

$（this）.find（'ul'）.show（）

，但这也不起作用。

$（this.find（'ul'）.hide（）

）和

$（this.find（'ul'）.show（）

效果很好。。。这正是我的问题所在。当你点击一个项目时，它将不再打开。