Dropdown Divs를 사용하여 더 나은 사용성을 위해 표시/숨기기를 전환합니다.

Question

이상의 코드를 변경하는 중입니다. hoverintent 플러그인에 대한 jquery의 표시 및 숨김 기능을 전환하려고합니다. 나는 2 가지 이유를 위해 이것을하고 싶다. 하나는 하위 항목이 튀어 나오기 전에 마우스가 메뉴 항목 위로 얼마나 오랫동안 머무르는지를 제어 할 수 있고, 2 번은 빌드에서 여러 인스턴스를 중지시킨다. 어젯밤부터 내 코드를 변경하려고 노력해 왔지만이 코드는 작동하지 않습니다 ... 아래는 내 원래 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> 

Answer 1

나는이 야호 ...이 할 수있는 가장 간단한 JQuery와 솔루션입니다했다 hoverintent 플러그인으로 기본 드롭 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; 
    }