hoverIntent jQuery를 하위 메뉴가 열려

요약 체류하지/문제점 : 하위 메뉴를 표시하기 위해 jQuery를하고 hoverIntent를 사용하는 메뉴 시스템에서 링크 위로 가져 가면 후hoverIntent jQuery를 하위 메뉴가 열려

, 하위 메뉴에 마우스 포인터를 이동하는 경우, 하위 메뉴 즉시 닫힙니다.

세부

는 내가 jQuery를 hoverIntent 플러그인에 문제가 있었어요. 하위 메뉴가 포함 된 탐색 메뉴가 있습니다. 이 하위 메뉴는 사용자가 지정된 최상위 링크를 가리키면 열립니다. 여기에 HTML은 다음과 같습니다

<ul id="Menu"> 
    <li><a href="/">Home</a></li> 
    <li><a href="news/">News</a></li> 
     <li class="hassublinks"><a href="software.php">Software & Apps</a> 
      <ul> 
       <li><a href="windows.php">Windows</a></li> 
       <li><a href="mac.php">Mac</a></li> 
       <li><a href="ios.php">iOS</a></li> 
       <li><a href="android.php">Android</a></li> 
      </ul> 
     </li> 
    <li><a href="feedback.php">Feedback</a></li> 
    <li><a href="about.php">About</a></li> 
</ul>

기본적으로

의 <ul> ID로 "메뉴"내의 각 <li> 웹 사이트의 페이지에 대한 링크를 가지고 있으며, <li>'s 하나 더 링크가있는 하위 메뉴 (다른 <ul>)가 포함되어 있습니다. 그 하위 메뉴가있는 <li>에는 "hassublinks"클래스가 주어지며, 기본 소프트웨어 & Apps 페이지에 링크하기 위해 여전히 <a> 태그가 있습니다. 하지만 하위 메뉴가 포함되어 있기 때문에 jQuery와 hoverIntent를 사용하여 소프트웨어 & Apps <li> 위로 마우스를 가져 가면 보조 메뉴 <ul>이 표시됩니다.

$(function($) { 

    function showMenu(){ 
     $('#Menu ul').slideDown(500, "swing"); 
    } 
    function hideMenu(){ 
     $('#Menu ul').slideUp(500, "swing"); 
    } 

    $('#Menu > li.hassublinks > a').hoverIntent({ 
     over: showMenu, 
     timeout: 400, 
     out: hideMenu 
    }); 
});

최상위 sublinks을 가지고 <li>의 <a> 태그를 가리킬 때, 하위 메뉴가 표시되도록이 코드는 단순히하게

후 사라 마우스 포인터 잎 : 여기에 코드입니다 . 그러나 에는 하나의 주요한 문제가 있습니다. 처음 <li>이 표시된 후 하위 메뉴가 표시되고 마우스 포인터가 해당 하위 메뉴로 이동하거나 하위 메뉴의 <li>으로 이동하면 하위 메뉴가 숨겨집니다. 분명히, 이것은 일어나지 않아야합니다. jsfiddle에서 demo을 만들었습니다. 이 문제를 해결할 방법이 있습니까? 이전에 하위 메뉴에 대해 CSS3 전환을 사용했지만 요소의 높이를 0px (닫힌 높이)에서 값 "auto"(열린 높이)로 쉽게 전환 할 수 없다는 것을 알았을 때 jQuery로 전환했습니다. 이제 jQuery를 사용하면 하위 메뉴를 전체 높이로 쉽게 전환 할 수 있으므로 더 이상 문제가되지 않지만 지금은이 문제가 있으며 해결 방법을 찾을 수 없습니다. 하위 메뉴를 열었을 때 열어 둘 수있는 방법이 있습니까?

나는 비슷한 질문을 검색하고 몇 가지를 발견했지만이를 읽은 후 나는 그들이 <div's>하지 <ul>'s, <li>'s 및 <a>'s 등을 포함 것을보고 한 나는 그를 사용하도록 변경하여 그 질문에 대한 답변을 테스트 할 때 태그가 올바르게 작동하지 않았습니다.

출처

2012-08-01 eg001

이

$(function($) { 

function showMenu() { 
    $('#Menu ul').slideDown(500, "swing"); 
} 

function hideMenu() { 
    $('#Menu ul').slideUp(500, "swing"); 
} 
    $("li.hassublinks").hoverIntent({ 
     over: showMenu, 
     timeout: 400, 
     out: hideMenu 
    }); 

});

시도

출처

2013-01-11 18:53:24 Sabin

hoverIntent jQuery를 하위 메뉴가 열려

답변

관련 문제