Question

我想要修改的菜单具有以下HTML结构：

<nav>
  <ul id="fashionmenu">
    <li class=""><a href="#">Home<a/></li>
    <li class=""><a href="about.html">About<a/></li>
    <li class=""><a href="#">Services</a>
        <ul>
           <li><a href="#">Service 1</a></li>
           <li><a href="#">Service 2</a></li>
        </ul>
    </li>
    <li class=""><a href="#">Contact</a>
  </ul>
</nav>

我试图完成的是下拉菜单上的延迟，我已经有了Jquery代码，但由于某种原因我无法理解（这里是我恳请你指导我的地方）为什么悬停，即使在悬停时有一个很好的平滑效果，菜单也不会退出，除非我再次悬停在它上面。当然，BUt，每当我将鼠标移动到不同的菜单项时，我都会想要这样，下拉菜单会自动退出。

这是javascript：


    $(function(){
      $('#fashionmenu > li > ul')
        .hide()
        .click(function(e){
        e.stopPropagation();
      });


      $('#fashionmenu > li').toggle(function(){
        $(this)
        .removeClass('waiting')
        .find('ul').slideDown();
      }, function(){
        $(this)
        .removeClass('waiting')
        .find('ul').slideUp();
      });

    $('#fashionmenu > li').hover(function(){
      $(this).addClass('waiting');
        setTimeout(function(){
          $('#fashionmenu .waiting')
          .click()
          .removeClass('waiting');
          },300);
        }, function(){
          $('#fashionmenu .waiting').removeClass('waiting');
        });

    });

提前感谢您的回答。

Answer 1

执行以下操作：http://jsfiddle.net/mwwFn/1/

$(function () {
  $('#fashionmenu > li > ul').hide().click(function (e) {
    e.stopPropagation();
  });

  $('#fashionmenu > li').toggle(function () {
    $(this).removeClass('waiting').find('ul').slideDown();
  }, function () {
    $(this)
      .removeClass('waiting')
      .find('ul').slideUp();
  });

  $('#fashionmenu > li').hover(function () {
    $(this).addClass('waiting').find('ul').slideDown();

  }, function () {
    $(this).removeClass('waiting').find('ul').delay(3000).slideUp();
  });

});

Answer 2

据我了解你的问题......可以用众所周知的hoverIntend插件解决： https://github.com/briancherne/jquery-hoverIntent

较旧但目的相同 - DoTimeOut http://benalman.com/code/projects/jquery-dotimeout/examples/hoverintent/

延迟使用jquery删除菜单

2 个答案: