jQuery 툴팁 메뉴가 제대로 숨겨져 있지 않습니다.

Question

플러그인의 모든 기능 (및 오버 헤드)이 실제로 필요하지 않기 때문에 자체 jQuery 툴팁 메뉴를 작성하려고합니다.

내 사이트에는 드롭 다운/툴팁 하위 메뉴가 필요한 몇 가지 항목이있는 일반적인 최상위 메뉴가 있습니다.

이

$("#ulink").hover(function(){ 
    $('#fmenu').slideUp(300); 
    $('#umenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
      // $('#umenu').slideUp(300); 
     }, 800); 
    }); 

$("#umenu").hover(function(){ 
    $('#fmenu').slideUp(300); 
    $('#umenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
       $('#umenu').slideUp(300); 
     }, 800); 
    }); 

$("#flink").hover(function(){ 
    $('#umenu').slideUp(300); 
    $('#fmenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
      // $('#fmenu').slideUp(300); 
     }, 800); 
    }); 

$("#fmenu").hover(function(){ 
    $('#umenu').slideUp(300); 
    $('#fmenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
       $('#fmenu').slideUp(300); 
     }, 800); 
    }); 

거의 내가 필요한 걸 제공 : 내가 사용 JQuery와 여기

<ul class="topmenu"> 
<li class="topmenu" id="flink"> 
<a href="pagewithsubmenu.php" class="topmenu">Link Text For Submenu 1</a> 
<div id="fmenu" style="display: none;" class="submenu"> 
<a href="submenu_link_1.php">Submenu Link 1</a><br> 
<a href="submenu_link_2.php">Submenu Link 2</a><br> 
<a href="submenu_link_3.php">Submenu Link 3</a><br> 
<a href="submenu_link_4.php">Submenu Link 4</a><br> 
</div> 
</li> 
<li class="topmenu"><a href="about.php" class="topmenu">About</a></li> 
<li class="topmenu"><a href="contact.php" class="topmenu">Contact Us</a></li> 
<li class="topmenu" id="ulink"> 
<a href="pagewithsubmenudeaux.php" class="topmenu">Link Text For Submenu 2</a> 
<div id="umenu" style="display: none;" class="submenu"> 
<a href="submenu_link_1a.php">Submenu Link 1a</a><br> 
<a href="submenu_link_2a.php">Submenu Link 2a</a><br> 
<a href="submenu_link_3a.php">Submenu Link 3a</a><br> 
<a href="submenu_link_4a.php">Submenu Link 4a</a><br> 
</div> 
</li> 
</ul> 

을 그리고 다음과 같이 마크 업이다. 메인 링크 중 하나 위에 마우스를 올리면 올바른 하위 메뉴가 열리 며 다른 하위 메뉴가 현재 열려 있으면 슬라이드가 닫힙니다. 여태까지는 그런대로 잘됐다.

마우스를 하위 메뉴로 돌리면 마우스가 하위 메뉴에있을 때만 열린 채로 있습니다. 마우스가 하위 메뉴 밖으로 이동하면 잠시 후 마우스가 밀폐됩니다. 완전한.

그러나 다른 메인 링크 (예 : 마우스를 옆으로 이동 한 다음 하위 메뉴 주위로 이동)를 마우스 오른쪽 버튼으로 클릭하지 않고 마우스를 메인 링크 밖으로 이동 시키면 하위 메뉴는 시간이 끝날 때까지 (또는 브라우저 창이 새로 고쳐질 때까지 열려있는 상태로 유지됩니다.)

부모 링크 LI 요소와 관련된 slideUp() 부분을 주석 처리했는데, 적절한 하위 메뉴 위에 마우스를 놓았더라도 마우스가 부모 링크를 벗어나면 하위 메뉴가 슬라이드됩니다. 이 동작은 분명히 메뉴를 사용할 수 없도록 만들었지 만, 이제는 약간 짜증나게합니다.

어떤 바보 같은 해결책이 있습니까?

도움 주셔서 감사합니다.

Answer 1

멈춤 (true, true), 수업 놀기 등 모든 종류의 답변을 살펴본 후 마침내 적어도 작동하는 쿨 (kludgy) 솔루션에 정착했습니다.

각 하위 메뉴에 숨김 필드를 설정했습니다. 페이지로드시이 값은 0으로 설정됩니다.

하위 메뉴의 마우스 오버시 숨겨진 필드의 값은 1로 설정됩니다. 하위 메뉴의 마우스 아웃시 숨겨진 필드의 값은 0으로 설정됩니다.

나는 링크 자체에 마우스 오버 부분을 다시 활성화했지만 if 문을 추가했습니다. 숨겨진 필드가 0으로 설정된 경우 (즉, 사용자가 현재 하위 메뉴 위에 마우스를 올려 놓지 않은 경우) 하위 메뉴가 위로 올라갑니다. 숨겨진 필드가 현재 1로 설정된 경우 (사용자가 하위 메뉴 위에 마우스가 올려 져 있음) 아무 것도 발생하지 않습니다.

HTML :

<input type="hidden" id="fph" value="0"> 
<input type="hidden" id="uph" value="0"> 
<ul class="topmenu"> 
<li class="topmenu" id="flink"> 
<a href="pagewithsubmenu.php" class="topmenu">Link Text For Submenu 1</a> 
<div id="fmenu" style="display: none;" class="submenu"> 
<a href="submenu_link_1.php">Submenu Link 1</a><br> 
<a href="submenu_link_2.php">Submenu Link 2</a><br> 
<a href="submenu_link_3.php">Submenu Link 3</a><br> 
<a href="submenu_link_4.php">Submenu Link 4</a><br> 
</div> 
</li> 
<li class="topmenu"><a href="about.php" class="topmenu">About</a></li> 
<li class="topmenu"><a href="contact.php" class="topmenu">Contact Us</a></li> 
<li class="topmenu" id="ulink"> 
<a href="pagewithsubmenudeaux.php" class="topmenu">Link Text For Submenu 2</a> 
<div id="umenu" style="display: none;" class="submenu"> 
<a href="submenu_link_1a.php">Submenu Link 1a</a><br> 
<a href="submenu_link_2a.php">Submenu Link 2a</a><br> 
<a href="submenu_link_3a.php">Submenu Link 3a</a><br> 
<a href="submenu_link_4a.php">Submenu Link 4a</a><br> 
</div> 
</li> 
</ul> 

그리고 업데이트 된 jQuery를 : 마법처럼

$("#ulink").hover(function(){ 
    $('#fmenu').slideUp(300); 
    $('#umenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
    window.setTimeout(function(){ 
     if($('#uph').val()==0){ 
      $('#umenu').slideUp(300); 
     } 
     }, 800); 
    }); 

$("#umenu").hover(function(){ 
    $('#uph').val(1); 
    $('#fmenu').slideUp(300); 
    $('#umenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
     $('#umenu').slideUp(300); 
     $('#uph').val(0); 
     }, 800); 
    }); 

$("#flink").hover(function(){ 
    $('#umenu').slideUp(300); 
    $('#fmenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
    window.setTimeout(function(){ 
     if($('#fph').val()==0){ 
      $('#fmenu').slideUp(300); 
     } 
     }, 800); 
    }); 

$("#fmenu").hover(function(){ 
    $('#fph').val(1); 
    $('#umenu').slideUp(300); 
    $('#fmenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
     $('#fmenu').slideUp(300); 
      $('#fph').val(0); 
     }, 800); 
    }); 

작품.

Answer 2

하위 메뉴가 li ("링크"라고 함)의 일부이기 때문에 슬라이드를 꺼내야합니다. 나는 당신이 그것에 moused 동안 백업 슬라이딩 하위 메뉴에 어떤 문제가 보이지 않을거야. 어떤 브라우저와 버전을보고 싶으십니까?

$("#ulink").hover(function(){ 
    $('#fmenu').slideUp(300); 
    $('#umenu').slideDown(300); 
    }, function(){ 
     var link = $(this); 
     window.setTimeout(function(){ 
      $('#umenu').slideUp(300); 
     }, 800); 
    }); 

$("#flink").hover(function(){ 
    $('#umenu').slideUp(300); 
    $('#fmenu').slideDown(300); 
}, function(){ 
    var link = $(this); 
    window.setTimeout(function(){ 
     $('#fmenu').slideUp(300); 
    }, 800); 
}); 

http://jsfiddle.net/vau9jtos/1/

EDIT : 전혀 팽창 메인 메뉴 바 유지 메뉴 0 폭

고정 위치 하위

하위 컨테이너 위치 http://jsfiddle.net/vau9jtos/2/