jQuery 드롭 다운 메뉴 작성에 도움이 필요합니다.

Question

저는 jQuery를 시작했습니다. 내 이해를 높이기 위해 간단한 'ul'드롭 다운 메뉴를 만들고 싶습니다. 기본 흐름은 다음과 같습니다.

'ul.menu li ul'표시 있음 : 없음 >> 표시가 없음, 가져 오기 & 저장 높이 'this'ul >> 'this'ul을 0으로 설정 높이 >> 차단 디스플레이를 설정 >> 원래 저장 높이

내가 드롭 다운에 대한 몇 가지 좋은 플러그인이 이미 알고

에 높이 애니메이션,하지만 난 정말 jQuery를 더 잘 이해하기 위해 내 자신의 롤합니다.

지금까지 내가 (여기 라이브 버전을 확인 - http://jsbin.com/eduvi)를 아주 나쁘게 할 다음을 처리했다 :

---

var $j = jQuery.noConflict(); 
$j(document).ready(function(){ 

// Get height of current hidden ul 

     $j("ul.menu li").hover(function() { 
      getHeight($j("ul", this).height()); 
     }); 
// Set height to 0px  

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"height":"0px"}); 
}); 

// Set display to block 

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"display":"block"}); 
}); 

// Animate height to stored height 

    $j('ul.menu li').hover(function getHeight(h) { 
    $j('ul:first', this).stop().animate({ "height" : "100%" } , 400); 
}); 

// Display height of current hidden ul 

    function getHeight(h) { 
     $j("div.test").text("The height for the hidden ul is " + h + "px."); } 
    }); 

---

내가 그것을 사용하는 얻는 방법을 알고 싶습니다 100 % 대신에 원래의 높이를 저장하십시오.

그리고 둘째로는,이 모두가 단 몇 줄 아래로 응축 될 수 있는지 해요,하지만 정말 어떻게 아직 할 수있는 단서가 없습니다.

도움을 주시면 대단히 감사하겠습니다!

UPDATE : 좋아, 그럼 내가 거의 다입니다. Marve 코드를 기본으로 게시하고 다른 비트로 작업했습니다. 유일하게 작동하지 않는 점은 숨겨진 UL의 높이를 모든 끝에서 다시 원래 높이로 재설정하고 디스플레이를 none으로 설정해야하므로 다시 내걸 준비가 된 것입니다. 왜 그것이 효과가 없을지 모르는 어떤 아이디어? 대신 $ ('ul.menu 리')의

('ul.menu> 리')

사용을 $ : 여기

$j('ul.menu > li').hover(
    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); }, 
    function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight, display:none}); } 
); 

---

Answer 1

---

당신에게 도움이되는 간단한 CSS 팁입니다

이렇게하면 마우스를 올리면 가리키고있는 목록 항목 아래의 메뉴 만 대상으로 설정됩니다.

Answer 2

그것은 당신이 jQuery를 배우고 그것을 할이 문제를 사용하고 있는지 좋아요. 그것을위한 명예!

저는 여러분이 문제에 대한 해결책을 과도하게 설계하고 있다고 생각합니다. 솔루션에서 얻은 노력 중 일부를 제거하는 데 도움이되는 두 가지 기본 제공 jQuery 함수 (slideDown 및 slideUp)를 살펴보십시오. 의심의 여지없이 jQuery documentation에서 더 많은 유용한 기능을 찾을 수 있습니다.

$j(document).ready(function() { 
    $j('ul.menu > li').hover(
     function() { $j(this).children('ul').stop(true, true).slideDown(); }, 
     function() { $j(this).children('ul').stop(true, true).slideUp(); } 
    ); 
}); 

당신이 당신의 HTML 샘플에있는 서브 메뉴를 처리하지만, 배울 수있는 당신의 욕망 주어지지 않는 조각, 그것은에 스트레치 안 :이 코드 조각은 당신이 이미 게시 무엇의 대부분을 수행 그것을 구현하십시오.

stop의 문서를 참조하십시오.