0

我创建了一个垂直的 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>

这是菜单

4

1 回答 1

0

尝试删除样式末尾的 li 并添加 padding: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 隐藏。

我用的是 1.7.2 jquery 版本

于 2013-02-16T03:44:59.077 回答