0

我正在尝试为 hoverintent 插件切换 jquery 的显示和隐藏功能。我想这样做有两个原因，第一，您可以控制鼠标在菜单项上停留多长时间，然后子项弹出，第二，它可以阻止多个实例的建立。从昨晚开始，我一直在尝试更改我的代码，但我只是没有让它工作......下面是我原来的 jquery 和 html，任何帮助将不胜感激。谢谢大家！！！

带有下拉菜单的网站

http://www.nestudiosonline.com/test.php

jQuery

$(document).ready(function() {
    // shows the hidden div in the list
    $('#dave').mouseover(function() {
        $('#aboutdke').show('200');

    });
    // hides the hide the div again for that list item
    $('#dave').mouseleave(function() {
        $('#aboutdke').hide();

    }); });

html

<ul id="menu">
        <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>
4

1 回答 1

1

我做到了，耶...这是最简单的 jquery 解决方案，用 hoverintent 插件做一个基本的 drop div，我的 html 根本不需要改变，我也展示了我的 css ......观察

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[
    $(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu     
      function addMega(){
        $(this).addClass("hovering");
        }
//remove hovering class to li's inside of the unordermened with the id menu  
      function removeMega(){
        $(this).removeClass("hovering");
        }
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time 
    var megaConfig = {
         interval: 300,
         sensitivity: 4,
         over: addMega,
         timeout: 200,
         out: removeMega
    };
//make list items with the class megamenu have the hoverinter plugin excuted on them 
    $("li.megamenu").hoverIntent(megaConfig)


    });


    //]]>
    </script>

CSS

ul#menu
{
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
}

ul# menu li
{
    display:inline;
    position: relative;
    }

ul#menu div {
  display: none;
}

ul#menu li.mega div {
    position: absolute;
}

ul#menu li.hovering div {
  display: block;
}

#aboutdke
{
    display:block;
    color:#FFF;
    text-align:left;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    background-color:#000;
    margin:0;
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
    border:0px;
    width:910px;
    height:280px;
    float:left;
    position:absolute;
    z-index:99999;
    top:164px;
    left:140px;
}


a.links:link
{
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
}

a.links:visited 
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
    } 

/* mouse over link */

a.links:hover
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }   

/* selected link */

a.links:active
    {
    display:block;
    width:120px;
    height:22px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    background-color:#000;
    float:left;
    }

a.dkeorg:link
{
    display:block;
    width:120px;
    height:23px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    float:left;
}

a.dkeorg:visited 
    {
    display:block;
    width:120px;
    height:23px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
    outline:none;
    } 

/* mouse over link */

a.dkeorg:hover
    {
    display:block;
    width:120px;
    height:23px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    float:left;
    }   

/* selected link */

a.dkeorg:active
    {
    display:block;
    width:120px;
    height:23px;
    padding-top:8px;
    padding-left:3px;
    padding-bottom:0px;
    color:#FFF;
    text-decoration:underline;
    text-align:center;
    outline:none;
    float:left;
    }
于 2010-12-07T00:34:03.677 回答