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

您可以尝试基于计时器的解决方案，例如

＆＃13;

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

＆＃13;

.dropdown_container {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

toggleClass()方法在添加和删除所选元素中的一个或多个类名之间切换。

此方法检查每个元素是否有指定的类名。如果丢失则添加类名，如果已设置则删除 - 这将创建切换效果..

试试这个，

＆＃13;

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

＆＃13;

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

＆＃13;

鼠标离开后Jquery下拉列表不会向上滑动

2 个答案: