.hover Works, On Click하지 않습니다.

Question

이렇게하면 많은 어려움이 있습니다. "풀다운 아코디언 하위 메뉴"(더 나은 이름이 없음)를 만들고 있습니다. 내 스크립트는 작동하지만 HOVER에서만 작동합니다. .click, .on ("클릭"), .on ("클릭", "리") 등을 사용하려고하면 아무 것도 작동하지 않습니다. 이 스크립트는 .hover를 사용할 때만 작동합니다.

참고! 클릭 이벤트가 발생하는 것은 "#TopMenu"뿐입니다. 하위 메뉴 ('#accordion')가 마우스 오버됩니다.

아이디어가 있으십니까?

작업 : 클릭하는 "#TopMenu 변경"

$(document).ready(function() { 

    $('#accordion li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

$('#TopMenu li').hover(function() { 

     $(this).find('li').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('li').stop(true, true).slideUp() 
    }).find('li').hide() 

}); 

가 작동하지 않습니다 :이 이상 견과류거야 http://jsbin.com/nidazuq/3/embed?html,js,output

:

$(document).ready(function() { 

    $('#accordion li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

$('#TopMenu li').on('click', function() { 

     $(this).find('li').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('li').stop(true, true).slideUp() 
    }).find('li').hide() 

}); 

내가 작업 여기에 검사를 , 나는 높고 낮은 해결책을 찾았다. 도와주세요.

Answer 1

ID는 페이지에 대해 고유해야하며 단일이어야합니다. 이 페이지에서 두 번 사용했습니다. 몇 가지 변화와 함께 바이올린을 추가했습니다.

Answer 2

$('#TopMenu li').on('click', function() { 
 
    $(this).children('ul').slideToggle(); 
 
}); 
 
$("#TopMenu li ul li > a").hover(function(){ 
 
    $(this).next('ul').slideToggle(); 
 
})

#TopMenu li ul, .firstStep ul ul, .firstStep ul{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="TopMenu"> 
 
    <li><a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a> 
 
    <ul id="accordion"> 
 
     <li> <a href="#" class="history_heading" rel="history_heading">HISTORY</a> 
 
     <ul> 
 
      <li><a href="#">Link One</a></li> 
 
      <li><a href="#">Link Two</a></li> 
 
      <li><a href="#">Link Three</a></li> 
 
      <li><a href="#">Link Four</a></li> 
 
      <li><a href="#">Link Five</a></li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a> 
 
     <ul> 
 
      <li><a href="#">Link One</a></li> 
 
      <li><a href="#">Link Two</a></li> 
 
      <li><a href="#">Link Three</a></li> 
 
      <li><a href="#">Link Four</a></li> 
 
      <li><a href="#">Link Five</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

는 우선은 여러 요소에 동일한 ID를 사용하고 있습니다. 이것은 잘못된 것입니다. 선택을 위해 클래스를 사용해야합니다. id='TopMenu'을 class='TopMenu'으로 변경하십시오. 둘째, '클릭'기능은 'li'요소로 실행되지 않습니다. 'a'요소의 클릭 기능을 들어야합니다.

$('.TopMenu li a').on('click', function() {}); 

나는 slideDown 및 slideUp 기능에 익숙하지 않지만 계속 사용할 수 있습니다. 그리고 $(this) 요소가이 클릭 기능에 대해 <a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a>을 참조한다는 것을 잊지 마십시오.