HoverIntent没有正确超时

我有一个问题与hoverIntent (JQuery和JavaScript插件)。

我的页面上的下拉菜单滑动太快，所以用户可能无法快速悬停到其他菜单点。为了避免它，我想使用hoverIntent来超时隐藏第二个菜单。

我的代码是:

function lvdropdown(){
  var config = {
    timeout: 1000
  }
    jq("#topmenu ul.menu ul").css({display: "none"});
    jq("#topmenu ul.menu li").hoverIntent(function(){
      jq(this).find('ul:first').css({visibility:"visible", display: "none"}).show('fast');
        },function(){
          jq(this).find('ul:first').css({visibility:"hidden"});
    }, config);
}
jQuery(document).ready(function(jq){                    
    lvdropdown();
});

我也读到CSS-File可能是我的问题的原因，所以我也会发布我的菜单的CSS-Style部分:

#topmenu ul.menu, #topmenu ul.menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em; 
    z-index:999;
    display:inline-block;
    width: 100%;
}
#topmenu ul.menu li, #topmenu ul.menu ul li {
    list-style:none;
}
#topmenu ul.menu {
    background-repeat: repeat-x;
}
#topmenu ul.menu li {
    float:left;
    position:relative;
}
#topmenu ul.menu li a, #topmenu ul.menu li span.separator {
    display:block;
    padding:5px 15px;   /* height of level1 links */
    text-decoration:none;
    vertical-align:middle;
    min-height:24px;
    background-repeat: repeat-x;
}
    /***** IMAGES *****/
#topmenu ul.menu li a img { 
    vertical-align:middle;
    padding-right: 5px;
}
#topmenu ul.menu li a span {
    vertical-align:middle;
}
    /***** FONT SIZE *****/
#topmenu ul.menu li a, 
#topmenu ul.menu li span.separator,
#topmenu ul.menu li a span {
    font-size:14px;
}
#topmenu ul.menu li ul li a, 
#topmenu ul.menu li ul li span.separator,
#topmenu ul.menu li ul li a span {
    font-size:12px;
}
#topmenu ul.menu li ul li {
    border:0 !important;
}
#topmenu ul.menu li.parent a, #topmenu ul.menu li.parent span.separator {
    background-image: url(../images/menu-parent-smooth.png);
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 30px;
}
#topmenu ul.menu li.parent a:hover, #topmenu ul.menu li.parent span.separator:hover {
    background-image: url(../images/menu-parent-hover-smooth.png);
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 30px;
}
#topmenu ul.menu li#current.parent a, #topmenu ul.menu li#current.parent span.separator {
    background-image: url(../images/menu-parent-hover-smooth.png);
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 30px;
}

    /***** LEVEL 2 *****/
#topmenu ul.menu ul {
    position:absolute;
    top:3em;        /* double line height of level 1 ul */
    display:none;
    padding:3px;    /* border of level2 ul */
    width:214px;
    border-radius: 10px;
}
#topmenu ul.menu ul li {
    margin:2px;
    width:210px;
}
#topmenu ul.menu li ul li a, #topmenu ul.menu li ul li span.separator {
    float:left;
    padding:4px 8px 4px 8px !important; /* height of level2 links */
    height:auto;
    width:194px;
    background: none !important;
}
#topmenu ul.menu li ul li a:hover {
    background: none !important;
}
#topmenu ul.menu li ul li.parent {
    background-image: url(../images/menulili_parent.gif) !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
}
#topmenu ul.menu li ul li.parent:hover {
    background-image: url(../images/menulili_parent_hover.gif) !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
}
#topmenu ul.menu li li.parent a, #topmenu ul.menu li li.parent span.separator,
#topmenu ul.menu li li.parent a:hover, #topmenu ul.menu li li.parent span.separator:hover,
#topmenu ul.menu li li#current.parent a, #topmenu ul.menu li li#current.parent span.separator {
    padding-right:8px !important;
}
#topmenu ul.menu ul ul{
    top:auto;
}   
#topmenu ul.menu li ul ul {
    left:190px;
    margin:0px 0 0 10px;
}
#topmenu ul.menu li:hover ul ul, #topmenu ul.menu li:hover ul ul ul, #topmenu ul.menu li:hover ul ul ul ul ,
#topmenu ul.menu li.hover ul ul, #topmenu ul.menu li.hover ul ul ul, #topmenu ul.menu li.hover ul ul ul ul{
    display:none;
}
#topmenu ul.menu li:hover ul, #topmenu ul.menu li li:hover ul, #topmenu ul.menu li li li:hover ul, #topmenu ul.menu li li li li:hover ul,
#topmenu ul.menu li.hover ul, #topmenu ul.menu li li.hover ul, #topmenu ul.menu li li li.hover ul, #topmenu ul.menu li li li li.hover ul{
    display:block;

我希望你能帮助我解决我的问题，感谢你的阅读和花时间帮助。

更新:我尝试将间隔设置为2000 (ms)，但它没有显示任何反应，也许这也有帮助。

更新:

这里我将添加html结构。条目包含在Joomla:

<div id="#topmenu">
<ul class="nav menu nav-pills">
<li class="item-101 current active">Home </li>
<li class="item-108 deeper parent">Unser Seminar 
    <ul style="visibility: hidden;" class="nav-child unstyled small">
        <li class="item-109">Seminarleitung </li>
        <li class="item-118">Verwaltung </li>
        <li class="item-119">Fachleiter/-innen und Mitwirker/-innen </li>
        <li class="item-120">Ausbilder/-innen Fachpraxislehrkräfte </li>
        <li class="item-122">Personalrat der Referendare </li>
        <li class="item-123">Vertrauensvolle Beratung </li>
        <li class="item-124">Förderverein Alumni </li>
    </ul>
</li>
    <li class="item-125 deeper parent">Ausbildung 
    <ul style="visibility: hidden;" class="nav-child unstyled small">
        <li class="item-126 deeper parent"> </li>
        <li class="item-136">Die IHK </li>
        <li class="item-137">Fachpraxis-Lehrkräfte </li>
        <li class="item-138">Quereinsteiger/innen </li>
    </ul>
</li>
</ul>
</div>

OK -我已经重新格式化了你的代码，现在改变超时应该工作。我不得不猜测HTML的结构，但它说明了这一点。

jQuery(document).ready(function () {
    jQuery("#topmenu ul.menu ul").css({
        display: "none"
    });
    jQuery("#topmenu ul.menu li").hoverIntent({
        over: function () {
            jQuery(this).find('ul:first').show('fast');
        },
        out: function () {
            jQuery(this).find('ul:first').hide();
        },
        timeout: 2000
    });
});

编辑:

你的HTML干扰了样式，所以如果你从<ul style="visibility: hidden;" class="nav-child unstyled small">中删除style="visibility: hidden;"，并将topmenu的id更改为id="topmenu"而不是id="#topmenu"，它应该都能工作。

你也可以去掉这个:

    jQuery("#topmenu ul.menu ul").css({
        display: "none"
    });

通过将其替换为相同选择器的CSS，就像这样(因为它们执行相同的功能，但CSS先加载)您不想要FOUC http://en.wikipedia.org/wiki/FOUC):

#topmenu  ul.menu ul{
    display:none;
}

在演示中，我添加了一个背景色，并限制了菜单的宽度，这样你就可以看到当你鼠标点击out。

演示:http://jsfiddle.net/robschmuecker/555X7/1/

相关内容

最新更新

热门标签：