jQuery로 자바 스크립트 구문 사용자 정의 CSS 가로 메뉴

Question

이것은 전통적인 자바 스크립트를 사용하는 가로 메뉴입니다.

function createcssmenu() 
{ 
    var ultags = document.getElementById("navmenu").getElementsByTagName("ul"); 
    for (var t = 0; t < ultags.length; t++) 
    { 
     ultags[t].style.top = ultags[t].parentNode.offsetHeight -1 + "px"; 
     ultags[t].parentNode.onmouseover = function() 
     { 
      this.style.zIndex = 100; 
      this.getElementsByTagName("ul")[0].style.visibility = "visible"; 
      this.getElementsByTagName("ul")[0].style.zIndex = 0; 
     } 
     ultags[t].parentNode.onmouseout = function() 
     { 
      this.style.zIndex = 0; 
      this.getElementsByTagName("ul")[0].style.visibility = "hidden"; 
      this.getElementsByTagName("ul")[0].style.zIndex = 100; 
     } 
    } 
} 

if (window.addEventListener) 
    window.addEventListener("load", createcssmenu, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", createcssmenu); 

jQuery 구문을 사용하여 다시 작성해야합니다.

$(document).ready(function() 
{ 
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px"); 

    $('#navmenu ul').parent().bind('mouseover', function() 
    { 
     $(this).css('z-index', 100); 
     $('#navmenu ul').css({ 'visibility': 'visible', 'z-index': 0 }); 
    }); 

    $('#navmenu ul').parent().bind('mouseout', function() 
    { 
     $(this).css('z-index', 0); 
     $('#navmenu ul').css({ 'visibility': 'hidden', 'z-index': 100 }); 
    }); 
}); 

그것은 올바른 작동하지 않습니다

이것은 내가 온 곳입니다.

나는 여전히 this.getElementsByTagName("ul")[0] 행에 문제가 있습니다. JSfiddle http://jsfiddle.net/sublay/HCajr/

에서

봐 그것은 정상적인 메뉴를 작동합니다.

감사합니다.

관련 질문 JavaScript to jQuery syntax Still need help on Converting 대신 위의 자바 스크립트를 다시 작성하는 노력의

Answer 1

난 당신이 FIDDLE

$(document).ready(function() 
{ 
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px"); 
    $('#navmenu ul').each(function(){ 
     $(this).css('top', $(this).parent().height() - 1 + "px") 
    }); 

    $('#navmenu ul').parent().bind('mouseover', function() 
    { 
     $(this).css('z-index', 100); 
     $('ul',this).css({ 'visibility': 'visible', 'z-index': 0 }); 
    }); 

    $('#navmenu ul').parent().bind('mouseout', function() 
    { 
     $(this).css('z-index', 0); 
     $('ul',this).css({ 'visibility': 'hidden', 'z-index': 100 }); 
    }); 
}); 

Answer 2

, 당신은 항상 그냥 간단하게 할 수있다. http://jsfiddle.net/DeHQ5/

$(document).ready(function() { 
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px"); 

    $('#navmenu > li').bind('mouseover', function() { 
     $(this).children('ul').css({ 
      'visibility': 'visible', 
      'z-index': 0 
     }); 
    }); 

    $('#navmenu > li').bind('mouseout', function() { 
     $(this).children('ul').css({ 
      'visibility': 'hidden', 
      'z-index': 100 
     }); 
    }); 
}); 

주요 변화는 초기 형제 선택 #navmenu > li입니다 -

이 바이올린에서보세요.