호버상에서 jquery 메뉴의 하위 메뉴 열기를 비활성화하십시오.

Question

내 응용 프로그램에서 jquery 메뉴를 사용하고 있습니다. 하위 메뉴는 3 단계입니다. 아래의 jsfiddle에 표시된 것과 같습니다. 우리는 메뉴 옵션에 마우스를 가져가 작업을 수행 할 때

http://jsfiddle.net/ankitap/WC3bE/

, 하위 메뉴가 자동으로 열립니다. 이 기능을 비활성화하고 클릭 할 때만 하위 메뉴를 열고 싶습니다. 내가 사용하려고 :

$("#menu a").menu({ role: null }); 

나는 또한 서브 클래스로 mainclass 및 레벨 2 클래스 이름으로 레벨 1 클래스 이름을 제공하기 위해 노력했다.

 <script> 
     $("#menu").menu(); 
     $("#menu a").click(function() { 
     console.log($(this).text()); // gets text contents of clicked li 
     $(".subclass a").show(); 
     }); 

     $("#menu a").click(function() { 
     $(".subclass a").hide(); 
     }); 
     </script> 

이 HTML 코드는 다음과 같습니다

<ul id="menu" class="mainclass"> 
    <li><a href="#">Aberdeen</a></li> 
    <li><a href="#">Ada</a></li> 
    <li><a href="#">Adamsville</a></li> 
    <li><a href="#">Addyston</a></li> 
    <li> 
    <a href="#">Delphi</a> 
    <ul class="subclass"> 
     <li > 
      <a href="#">Ada</a> 
      <ul> 
       <li> 
        <a href="#">ankita</a>    
       </li> 
      </ul>  
     <li><a href="#">Saarland</a></li> 
     <li><a href="#">Salzburg</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Saarland</a></li> 
    <li> 
    <a href="#">Salzburg</a> 
    <ul class="subclass"> 
     <li> 
     <a href="#">Delphi</a> 
     <ul> 
      <li><a href="#">Ada</a></li> 
      <li><a href="#">Saarland</a></li> 
      <li><a href="#">Salzburg</a></li> 
     </ul> 
     </li> 
     <li> 
     <a href="#">Delphi</a> 
     <ul> 
      <li><a href="#">Ada</a></li> 
      <li><a href="#">Saarland</a></li> 
      <li><a href="#">Salzburg</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Perch</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Amesville</a></li> 
</ul> 

나는 마우스 호버에 하위 메뉴의 개방을 막을 수 없다. 부 메뉴가 click.Please 도움 후에 만 ​​열리고 싶습니다! 감사합니다.

Answer 1

더 JS/JQuery와 전문가하지만 어쩌면 때어 mouseenter와하는 MouseLeave 이벤트

$("#menu").menu(/*{ 
select: function(event, ui) { 
    var selection = ui.item.text(); 
    var get=this.event; 
    console.log(get); 
}}*/); 
$('#menu').unbind('mouseenter mouseleave'); 
$("#menu a").click(function() { 
    console.log($(this).text()); 
}); 

참고 $('#menu').unbind('mouseenter mouseleave'); 문