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(); 
  });

Answer 2

jQuery hide()设置display: none，但您需要设置visibility: hidden：

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

Answer 3

考虑使用所有JS实现（如@Beri建议的那样），但是如果你想使用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>

JS没问题。

Test it

关闭后下拉不会打开

3 个答案: