jQuery的下拉菜單關閉導航欄不能正常工作

Question

我有jQuery的下拉條：

$(document).ready(function(){ 
 
     $(".dropbtn").hover(function(){ 
 
      $(".dropdown-content").slideDown("fast"); 
 
      $(".dropdown-content").show; 
 
     }); 
 
     $(".dropdown").mouseout(function(){ 
 
      $(".dropdown-content").slideUp("fast"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">##</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">##</a> 
 
     <a href="#">##</a> 
 
     </div> 
 
    </li> 
 
    </ul>

當我將鼠標懸停在下拉菜單裏，下拉內容下滑，但我可以」將鼠標懸停在內容上而不會滑動。我知道問題在於jquery中的mouseout函數，但我沒有試過可以修復它。

Answer 1

試試這個：

<script> 
    $(document).ready(function() { 
    $(".dropbtn").hover(function() { 
     $(".dropdown-content").slideDown("fast"); 
     $(".dropdown-content").show(); 
    }); 

    $(".dropdown-content").hide(); 

    $(".dropdown").mouseout(function() { 
     $(".dropdown-content").mouseout(function() { 
      $(".dropdown-content").slideUp("fast"); 
      $(".dropdown-content").show(); 
     }); 

    }); 
}); 
</script>