JavaScript到jQuery语法构建自定义CSS水平菜单 [英] JavaScript to jQuery syntax Building custom CSS horizontal menu

问题描述

这是使用传统JavaScript的水平菜单.

This is a horizontal menu using traditional JavaScript.

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语法重新编写它.

I need to re-write it using jQuery syntax.

这是我来的地方

$(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/

Look at JSfiddle http://jsfiddle.net/sublay/HCajr/

它应该可以在普通菜单上工作.

It should work a normal menu.

谢谢！

相关问题 JavaScript到jQuery语法仍需要转换帮助

推荐答案

我认为这就是您想要的

I think this is what you want 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 });
    });
});

这篇关于JavaScript到jQuery语法构建自定义CSS水平菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！