垂直菜单的Jquery问题

Question

我创建了一个垂直的wordpress菜单，并且我试图使用Jquery代码（用于创建HTML菜单的Internet）使子菜单显示在。他们的父母（目前出现在屏幕上

下面是我的菜单CSS：

/* First Level Menu */ 
#vert-menu li { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font: bold 13px arial; 
    width: 180px; 
    } 

#vert-menu li a { 
    display: block; 
    overflow: auto; 
    color: orange; 
    text-decoration: none; 
    padding: 6px; 
    border-bottom: 1px solid #000000; 
    background-color: black; 
    } 

#vert-menu li a:link, #vert-menu li a:visited, #vert-menu li a:active { 
    color: white; 
    } 

#vert-menu li a:hover { 
    background-color:orange; 
    color:white; 
    } 

/* End First Level Menu */ 

#vert-menu li ul a { 
    display: block; 
    overflow: auto; 
    color: white; 
    text-decoration: none; 
    padding: 6px; 
    border-bottom: 1px solid #000000; 
    border-right: 1px solid #000000; 
    } 

#vert-menu li ul a:link, #vert-menu li ul a:visited, #vert-menu li ul a:active { 
    background-color: orange; 
    } 

#vert-menu li ul a:hover { 
    background-color:orange; 
    color:white; 
    } 

#vert-menu li ul li { 
    position: absolute; 
    width: 180px; 
    top: 0; 
    visibility: hidden; 
} 

有可能是一些错误的jQuery代码或我称它在header.php文件的方式

以下是JQuery：

$("document").ready(function() { 

// Function triggered when mouse hovers over a menu item 
// Looking for a LI item that has a UL for a child element 
// If it does trigger the function on mouseover 
$('#vert-menu li a').parent().has('ul').mouseover(function() { 

    // offset() returns the top & left relative position on the doc for LI 
    tagOffset = $(this).offset(); 

    /* I use the following to get the tag name for this 
    getTagName = $(this).get(0).tagName; 
    alert(getTagName); */ 

    // Get distance from the left for the LI 
    offsetLeft = tagOffset.left; 

    // Get distance from the top for the LI 
    offsetTop = tagOffset.top; 

    // Move the new popup 180px to the left (Width of parent UL) 
    popOutOffsetLeft = offsetLeft + 180; 

    // Get the id for the first UL contained in the LI 
    closeParent = $(this).closest("ul").attr("id"); 

    // Checking if the UL is a second level of third level popup menu 
    if (closeParent == 'vert-menu') 
    { 
     // Make menu visible and move it into position on the document 
     $(this).find('ul').first().css({'visibility' : 'visible', 'left' : popOutOffsetLeft + 'px', 'top' : offsetTop + 'px'}); 
    } else { 
     // Find offset for the UL that surrounds the third level popup 
     secondOffset = $(this).find('ul').last().parent().offset(); 

     // Subtract the top offset from the second menu to position properly 
     secondOffsetTop = secondOffset.top - offsetTop; 

     // Correct the positioning on offset left 
     secondOffsetLeft = offsetLeft - 10; 

     // Make menu visible and move it into position on the document 
     $(this).find('ul').last().css({'visibility' : 'visible', 'left' : secondOffsetLeft + 'px', 'top' : secondOffsetTop + 'px'}); 
    } 
}); 

// When the mouse moves off the menu hide everything 
$('#vert-menu li a').parent().has('ul').mouseout(function() { 
    $(this).find('ul').css({'visibility' : 'hidden'}); 
}); 

}); 

而就在我不知何故使得在头文件中的错误的情况下，这里是如何jQuery的文件被称为：

!-- BEGIN JS --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/superfish.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.fancybox-1.3.4.pack.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.scrollTo.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.baseball-menu.js"></script> 

Here's the menu

Answer 1

尝试在移除李在样式和添加填充结束：0像这样：

#vert-menu li ul { 
    position: absolute; 
    width: 180px; 
    top: 0; 
    visibility: hidden; 
    padding: 0; 
    } 

只是在这种情况下，您可以使用较少的代码与somet hing是这样的：

$("document").ready(function() { 
    $('#vert-menu li a').parent().has('ul').hover(
     function() {$('ul', this).stop().show(500); }, 
     function() {$('ul', this).stop().hide(300); }); 
}); 

并替换可见性：隐藏显示：无我在ul上面提到。

我用的jQuery 1.7.2版本