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>