JQuery:ul悬停在下拉菜单上

尝试使用jQuery的悬停来显示/隐藏ul项以提供下拉效果

这是jQuery。忽略警报功能

$(document).ready(function () { 

    $('ul.drop li').hover(
        function () {
            alert("asa");
            //show its submenu
            var isVisible = $(this).next('ui').is(':visible');
            alert("dvData is " + isVisible);
            var isHidden = $(this).next('ui').is(':hidden');
            alert("dvData is " + isHidden);

            $(this).next('ul').css({visibility: "visible", display: ""});

        }, 
        function () {
            //hide its submenu
            $(this).next('ul').css({visibility: "hidden", display: ""});
        }
    );

});

这是jsp页面

<ul class="drop">
<li><a href="#">Main</a></li>
<li>Reporting
 <ul >
    <li><a href="#" target="_blank">Magellan Reports</a></li>
    <li><a href=""/>"  target="_blank">Script Reports</a></li>
 </ul>

<li><a href="<c:url value="#"/>"   target="_blank">CMS</a></li>
<li><a href="<c:url value="#"/>"  target="_blank">Operations</a></li>
</ul>

我想我已经用css单独完成了，但是一些必需的、长的、损坏的css文件不允许我这么做。。请帮助执行jQuery。

next（）

查找下一个同级，该同级不匹配，因为您没有触发的同级。相反，您希望查找子项，因此请尝试

children（）

查找匹配的子项。将JS修改为以下内容：

$（'ul.drop li'）。悬停(
函数（）{
$（this.children（'ul'）.css（{可见性：“可见”，显示：}）；
}, 
函数（）{
$（this.children（'ul'）.css（{可见性：“隐藏”，显示：}）；
}
);

您可以在此处查看演示--CSS看起来需要做一些工作，但至少JS正在工作。

next（）

查找下一个同级，它不匹配，因为您没有触发

的同级。相反，您希望查找子项，因此请尝试

children（）

查找匹配的子项。将JS修改为以下内容：

$（'ul.drop li'）。悬停(
函数（）{
$（this.children（'ul'）.css（{可见性：“可见”，显示：}）；
}, 
函数（）{
$（this.children（'ul'）.css（{可见性：“隐藏”，显示：}）；
}
);

---

您可以在此处查看演示--CSS看起来需要做一些工作，但至少JS正在工作。

如果我将li更改为

liReporting

这将停止工作，如果我将li更改为

liReporting

ul#nav {padding-left:16px;background-image:url(../images/buehne_5_intra.gif)}
clear {clear:both}
ul.drop a {color:#87A7CE;line-height:14px;display:block;text-decoration: none;
background-repeat:no-repeat;background-image:url(../images/diagonale_hauptnavigation.gif);background-position:right;
    height:10px;padding-right:22px; float:left;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; background: #039;
color: #fff;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1.0em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li ul { visibility: hidden; position: absolute; top: 100%; left: 20px; z-index: 598; width: 150px; margin-left:50px;}
ul.drop ul a {color:#87A7CE;line-height:14px;display:block;text-decoration: none;height:10px;padding-left:10px; float:left;background-image:none;}
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
.drop img{width:22px;height:24px;background-color:#039;margin-left:-20px;vertical-align:top}