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

Answer 2

与此一起使用CSS

.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);
 display: none;
}

.menu:hover .rozw {
  display: block;
}

鼠标悬停后向下滑动菜单，请不要单击

2 个答案: