jQuery 드롭 다운 메뉴 완성 안내

Question

드롭 다운 메뉴를 만들려고하지만 jquery를 배우는 첫 번째 단계에서 멈추었습니다. 이제 내가 원하는 것은 "지원"메뉴 항목을 가리키고 "드롭 다운 메뉴 항목 1"이 나타나야하고 (메뉴 항목 1 드롭 다운) 메뉴 항목에 "메뉴 항목 2 드롭 다운"이 나타나야합니다. "메뉴 항목 1 드롭 다운"옆에 수평으로 배치 된 상자. http://jsfiddle.net/pyrot/84eWr/

사람이 좀 도와 주시겠습니까 :

이 나는이 바이올린을 제공하고 있습니다. 나는 정말로 어떤 도움을 주셔서 감사합니다. CSS를 여기에

$(document).ready(function() { 

     $(".support").hover(function() { 
      $(".support-drop").addClass("support-drop.hide"); 
     }, function() { 
      $(".support-drop").removeClass("support-drop.hide"); 

     }); 

)} 

과 :

ul {color: #000000;} 

.support-drop.hide { display: none ;} 

.support-drop { 
    background-color: #000000; 
    color:#ffffff; 
    width: 200px; 
    height: 100px; 
} 

.support-drop.two { 
    background-color: #5C5C5C; 
    color:#ffffff; 
    width: 200px; 
    height: 100px; 
} 

Answer 1

먼저 모든 어떻게 구조를 알 필요가 드롭 다운이 작동합니다. 길에 ul 및 li 태그가 있습니다. 당신이 정보의 각 수준에 대한 ul를 얻을이처럼 li 항목 안에 보관 장소 :

<ul> 
    <li class="support">support 
    <ul> 
     <li class="support-drop hide">drop menu item 1 
     <ul> 
      <li class="support-drop two hide">drop menu item 2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

을하는 구조로 지금 당신은 올바른 방법으로 작업 할 수 있습니다. 하위 메뉴를 숨기려면 display:none과 같은 CSS 속성이 필요하고 시각적 시각을 얻으려면 position:absolute이 필요합니다.

그냥 CSS로 드롭 다운을 수행 할 수 있지만 Jquery로이를 수행하려면 표시 및 숨기기 작업을 수행하려면 hover() 핸들러가 필요합니다. 이처럼 :

$('li').hover(function(){ 
    $(this).children('ul').slideToggle(); 
}) 

확인 리아드을 회신이 Fiddle Demo

Answer 2

그것은해야 여기

는 HTML입니다 :

<ul> 
<li class="support">support</li> 
<li class="support-drop hide">drop menu item 1</li> 
<li class="support-drop two hide">drop menu item 2</li> 
</ul> 

여기에 내가 고민하고있는 코드입니다 이렇게 :

당신은 두 번째 요소에 클래스가 "하나"라고 추가해야

<li class="support-drop hide *one*">drop menu item 1</li> //html add class say "one" 

    $(".support").hover(function() { 
     $(".one").show(); // it already has the class, so no addClass is needed. 
    }, function() { 
     $(".one").hide(); // removing class will get you not working next time. 

    }); 

/// 다시 쇼에 이르기까지 두 번째 드롭에 대한 :

$(".one").hover(function(){ 
     $('.two').show(); 
    }, function(){ 
      $('.two').hide(); 
    }) ;