0

我要修改的菜单具有以下 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 代码，但由于某种原因我无法理解（这里是我请你指导我的地方）为什么悬停，甚至如果对 hover 有很好的平滑效果，除非我再次将其悬停在菜单上，否则菜单不会退出。但是，当然，我希望每当我将鼠标移动到不同的菜单项时，下拉菜单都会自动退出。

这是javascript：

    $(函数(){
      $('#fashionmenu > li > ul')
        。隐藏（）
        .click(函数(e){
        e.stopPropagation();
      });


      $('#fashionmenu > li').toggle(function(){
        $(这个)
        .removeClass('等待')
        .find('ul').slideDown();
      }， 功能（）{
        $(这个)
        .removeClass('等待')
        .find('ul').slideUp();
      });

    $('#fashionmenu > li').hover(function(){
      $(this).addClass('等待');
        设置超时（函数（）{
          $('#fashionmenu .waiting')
          。点击（）
          .removeClass('等待');
          },300);
        }， 功能（）{
          $('#fashionmenu .waiting').removeClass('waiting');
        });

    });

提前感谢您的任何回答。

4

2 回答 2

0

做这样的事情：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();
  });

});
于 2013-01-16T23:56:50.893 回答
0

据我了解您的问题......它可以通过著名的 hoverIntend 插件来解决： https ://github.com/briancherne/jquery-hoverIntent

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

于 2013-04-02T18:33:39.227 回答