垂直菜单的Jquery问题
我已经创建了一个垂直wordpress菜单,我正试图使用Jquery代码(来自互联网,用于创建HTML菜单)使子菜单显示在其父菜单的右侧(当前显示在屏幕上) 以下是我的菜单的CSS:垂直菜单的Jquery问题,jquery,css,Jquery,Css,我已经创建了一个垂直wordpress菜单,我正试图使用Jquery代码(来自互联网,用于创建HTML菜单)使子菜单显示在其父菜单的右侧(当前显示在屏幕上) 以下是我的菜单的CSS: /* First Level Menu */ #vert-menu li { margin: 0; padding: 0; list-style-type: none; font: bold 13px arial; width: 180px; } #vert-men
/* 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>
!--开始JS-->
尝试删除样式末尾的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); });
});
在这种情况下,您可以通过以下方式用更少的代码实现同样的功能:
#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版本您需要使用jquery无冲突模式,我将所有的$都切换到jquery,但这并没有解决任何问题。还有其他建议吗,或者我仍然在做错事吗?这是一个JavaScript问题,在WSPE上与主题无关,最好尝试溢出。