메뉴 바깥 쪽을 클릭하면 jQuery 메뉴가로드되지 않습니다.

Question

부트 스트랩 드롭 다운 메뉴를 사용하고 있습니다. 아래의 코드를 참조하십시오

$(document).ready(function(){ 
     $("#a-primary-occasion").mouseover(function(){ 
      $(".dropdown-menu_occasion").css("display", "block"); 
     }); 
     $('#submenu-birthday_occasion').mouseover(); 
    }); 

이 스크립트는 페이지가로드 될 때 잘 작동 메인 메뉴의 PHTML 파일에 있습니다. 그러나 외부 메뉴 (페이지의 다른 콘텐츠)를 클릭하면 mouseover() 이벤트가 발생하지 않습니다.

현재 위치를 확인할 수 있습니다 http://jshri.com

• 을 페이지가 바로 첫 번째 메뉴 (행사)에 마우스를 넣은 후. "생일 선물"하위 메뉴가 열립니다. 어디서나 메뉴 외부 (예를 들어, 위의 "행사"메뉴)에

• 클릭 행사 메뉴에서

• 호버는 첫 번째 메뉴를 열 수 없습니다. 첫 번째 하위 메뉴 (예 : 생일 선물)에서 마우스를 가져 가면 해당 메뉴가 표시되지 않습니다. 하지만 두 번째 하위 메뉴 (예 : 기념일 선물)에서 마우스를 올려 놓으면 하위 메뉴가 열리고 첫 번째 하위 메뉴에서도 마우스를 올리면 나중에 제대로 작동합니다.

참고 : document.ready()에 경고를 추가하면 항상 실행됩니다.

왜 이런 일이 발생하는지 잘 모르겠습니다. 누구 아이디어가 있습니까? 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

나는 그것을 스스로 발견했다!

내가 부트 스트랩 메뉴를 사용 중이라고 말했기 때문에 기본적으로 클릭 이벤트에서 열었습니다. 나는 hover 이벤트로 바뀌었다. 그러나 나는 document.click 이벤트에서 현재 열려있는 메뉴를 숨기고있는 jQuery를 제거하지 않았다. 이것은 내가 코멘트 한 코드입니다 :

$(document).click(function() { 
     // Simply hide the submenu on any click. Again, this is just a hacked 
     // together menu/submenu structure to show the use of jQuery-menu-aim. 
     $(".popover_relation").css("display", "none"); 
     $("a.maintainHover_relation").removeClass("maintainHover_relation"); 
    });