javascript - 关闭后下拉框打不开

Question

我用 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>

Answer 1

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

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

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