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

尝试删除样式末尾的li并添加填充：0如下：

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

就这种情况而言，你可以用更少的代码做同样的事情：

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

并替换上面提到的ul中由display：none隐藏的visibility：

我使用了1.7.2 jquery版本

垂直菜单的Jquery问题

1 个答案: