ul li jQuery로보기/숨기기

Question

드롭 다운 메뉴를 만들려고합니다.

하지만 mouseout에서 숨길 하위 메뉴 항목을 가져올 수 없습니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul ul').hide(); 
     $('ul li.top_menu_first a').removeAttr("href"); 
     $('ul li.top_menu_first > a').mouseover(function(event) { 
      $(this).parent().find('ul').show('slow'); 
     }); 

     $('ul li.top_menu_first ul').mouseout(function(event) { 
      $('ul ul').hide('slow'); 
     }); 
    }); 
</script> 

내 HTMLcode는 : 귀하의 코드를 추적

<div id="top_menu"> 
    <ul> 
     <li class="top_menu_first"><a href="http://google.com">ABC</a> 
      <ul> 
       <li><a>1</a></li> 
       <li><a>2</a></li> 
       <li><a>3</a></li> 
      </ul> 
     </li> 
     <li class="top_menu_first"><a>DEF</a></li> 
     <li class="top_menu_first"><a>GHI</a></li> 
     <li class="top_menu_first"><a>JKL</a> 
      <ul> 
       <li><a>4</a></li> 
       <li><a>5</a></li> 
       <li><a>6</a></li> 
      </ul> 
     </li> 
     <li class="top_menu_first"><a>MNO</a> 
      <ul> 
       <li><a>7</a></li> 
       <li><a>8</a></li> 
      </ul> 
     </li class="top_menu_first"> 
    </ul> 
</div> 
<div id="footer"></div> 

사람이

Answer 1

을 도울 수 바랍니다 경우 모든 자체를 숨 깁니다

내 jQuery 코드는

이동 하위 메뉴 mouseOut. 메뉴 이름에서 마우스를 내리면 하위 메뉴를 숨기려고한다고 가정합니다.

$('ul li.top_menu_first ul').mouseout(function(event) { ( http://jsfiddle.net/qgbtd/) 에서 ul 는 의견 같은 또한 이 mouseleave() 그것에게 더 좋은 동작을 제공하여 말 당신이 당신의 HTML에 jQuery를로드하고 있는지 확인 삭제

Answer 2

나는 당신이 이것에 대한 jQuery를 필요가 있다고 생각하지 않습니다 . 먼저 CSS로 작업 해보십시오. 논리적 인 단계입니다. 애니메이션이 필요하다면 CSS3 전환과 jQuery를 사용하십시오. 이전 브라우저의 경우와 마찬가지로 실제로는 애니메이션이 필요하다면 폴백으로, 그렇지 않으면 그냥 그대로두면 오래된 브라우저는 불투명도를 애니메이션화하지 않습니다.

데모 :http://jsbin.com/uqebor/9/edit

ul.menu, 
ul.menu ul { 
    position: relative; 
    list-style: none; 
    padding: 0; 
    -webkit-transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
} 
ul.menu li { 
    margin: 1px 0; 
} 
ul.menu > li { 
    float: left; 
    margin: 0 .5em; 
} 
ul.menu a { 
    text-decoration: none; 
    display: block; 
    width: 100px; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    border: 1px solid black; 
    background: white; 
} 
ul.menu ul { 
    visibility: hidden; 
    height: 0; 
    width: 0; 
    opacity: 0; 
} 
ul.menu li:hover ul { 
    width: auto; 
    height: auto; 
    visibility: visible; 
    opacity: 1; 
}