Question

我遇到了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样式部分：

#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-Structure。这些物品包含在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>

Answer 1

好的 - 我已经重新格式化了你的代码，现在更改超时应该可行。我不得不猜测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正在干扰样式，因此如果您从style="visibility: hidden;"删除<ul style="visibility: hidden;" class="nav-child unstyled small">并将id topmenu更改为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/

HoverIntent没有正确超时

1 个答案: