Jquery Dropdown List鼠標離開後沒有滑動

Question

所以我基本上試圖用jquery創建一個下拉列表。我成功地實現了，但遇到了一個小問題。下面的代碼

HTML

<div class="dropdown_heading"> 
     text 
    </div> 
     <div class="dropdown_container"> 
      <div class=""> 
      <a href="#">Competition1</a> 
      </div> 
      <div class=""> 
      <a href="#">Competition2</a> 
      </div> 
      <div class=""> 
      <a href="#">Competition3</a> 
      </div> 

     </div> 

JQUERY

$(document).ready(function(){ 
    $(".dropdown_heading").mouseenter(function(){ 
    $(".dropdown_container").slideDown(); 
    }); 

    $(".dropdown_container").mouseleave(function(){ 
     $(".dropdown_container").slideUp(); 
    }); 
}); 

一旦我將鼠標懸停在dropdown_heading下拉顯示向上和我能夠瀏覽過它，但只它回退的方式是如果我實際上在dropdown_container中有光標。如果我嘗試從dropdown_heading中移除鼠標，下拉菜單仍然可見。當鼠標離開div_container和div_heading時，如何能夠將子菜單重新滑動？

我試着執行此功能，但因此我無法瀏覽容器。謝謝。

$(".dropdown_heading").mouseleave(function(){ 
     $(".dropdown_container").slideUp(); 
    }); 

Answer 1

你可以嘗試像

基於定時器的解決方案

jQuery(function($) { 
 
    var $target = $(".dropdown_container"); 
 
    $('.dropdown_heading').hover(function() { 
 
    clearTimeout($target.data('hoverTimer')); 
 
    $target.stop(true, true).slideDown(500); 
 
    }, function() { 
 
    var timer = setTimeout(function() { 
 
     $target.stop(true, true).slideUp(); 
 
    }, 200); 
 
    $target.data('hoverTimer', timer); 
 
    }); 
 

 
    $target.hover(function() { 
 
    clearTimeout($(this).data('hoverTimer')); 
 
    }, function() { 
 
    $(this).stop(true, true).slideUp(); 
 
    }); 
 
});

.dropdown_container { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown_heading"> 
 
    text 
 
</div> 
 
<div class="dropdown_container"> 
 
    <div class=""> 
 
    <a href="#">Competition1</a> 
 
    </div> 
 
    <div class=""> 
 
    <a href="#">Competition2</a> 
 
    </div> 
 
    <div class=""> 
 
    <a href="#">Competition3</a> 
 
    </div> 
 

 
</div>

Answer 2

的toggleClass()方法添加和刪除所選擇的元件的一個或多個類名之間切換。

此方法檢查每個元素的指定類名稱。如果缺少類名是添加，如果已經設置刪除 - 這將創建一個切換效果..

試試這個，

$(document).ready(function(){ 
 
    $(".dropdown_heading").mouseenter(function(){ 
 
    $(".dropdown_container").toggle(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown_heading"> 
 
     text 
 
    </div> 
 
     <div class="dropdown_container"> 
 
      <div class=""> 
 
      <a href="#">Competition1</a> 
 
      </div> 
 
      <div class=""> 
 
      <a href="#">Competition2</a> 
 
      </div> 
 
      <div class=""> 
 
      <a href="#">Competition3</a> 
 
      </div> 
 

 
     </div>