jquery - 鼠标悬停后下拉菜单，不点击

Question

我在悬停后让菜单向下滑动时遇到问题。当我将光标从顶部导航移开时，菜单会向上滑动。另外，我想在将光标从滑动部分移开后菜单向上滑动之前添加一个延迟(假设 500 毫秒)。我试图在这里找到一个现有问题，但找不到我的问题的完整答案。这是我目前所拥有的:

$(document).ready(function() {
  var $tabs = $('.menu');

  $('.rozw', $tabs).hide();
  $('.option', $tabs)

    .hover(function() {

      if ($(this).siblings('.rozw').is(':visible')) {
        $(this).siblings('.rozw').slideUp(200);
      } else {
        $('.rozw', $tabs).slideUp(200);
        $(this).siblings('.rozw').slideDown(200, function() {});
      }

    });
});

.menu .option {
  background: #FAD9D9;
  margin: 0px;
  padding: 10px;
  cursor: pointer;
}

.menu .rozw {
  background: #DDFAD9;
  margin: 0px;
  padding: 5px;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: calc(100% - 10px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu">
  <h3 class="option">Menu</h3>

  <div class="rozw">
    <div class="item">
      <img src="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/96x96/diagram_v2-12.png">
      <p>Option</p>
    </div>
  </div>
</div>

JSfiddle here

谢谢

Answer 1

像这样使用 jquery:

$(document).ready(function(){
    var $tabs = $('.menu');

    $('.rozw', $tabs).hide();
    $('.option').hover(function () {
        $('.rozw').show();
    }, function () {
        $('.rozw').hide();
    });
});