0

我正在尝试使用 Javascript 创建自己的导航栏，这就是我目前所拥有的。

$(document).ready(function() {
<nav class="menuL">
    <ul id="menu">
        <li><a href="#!/page_portfolio" id="portmenu"><span></span>portfolio</a></li>
            <ul id="submenu">
                <li id="first"><a href="#!/">Wine</a></li>
                <li id="second"><a href="#!/">Landscape</a></li>
                <li id="third"><a href="#!/">Divers</a></li>
            </ul>
<script>
    $('#submenu').hide();
</script>
<script>
        if ($('#portmenu').mouseover() || $('#first').mouseover() || $('#second').mouseover() || $('#third').mouseout()) {
            $('#submenu').show();
        } else {
            $('#submenu').hide();
}
});
</script>

子菜单实际上是隐藏的，但是当我将鼠标悬停在 portmenu 上时，子菜单没有出现..关于什么是错误的任何想法？我是 javascript 新手，所以我不知道我是否正确使用了选择器、OR 运算符和 if 语句。

基本上我要做的是，如果主端口菜单悬停在上面，或者如果第一个、第二个和第三个悬停在上面，则显示子菜单。否则，隐藏它。我正在尝试这样做，因为如果我只是创建一个显示子菜单的函数，如果端口菜单被悬停，那么当我悬停文本“投资组合”时，子菜单就会消失。

4

3 回答 3

4

您只能使用 CSS：

#menu > #submenu{
    display: none;
}
#menu:hover > #submenu{
    display: block;
}

演示：http: //jsfiddle.net/Wp5sF/

于 2013-07-13T00:06:21.397 回答
1

jsFiddle Demo

您可能应该通过利用jQuery 的 hover来做更多的事情：

$('#submenu').hide();
$('#portmenu, #first, #second, #third').hover(function(){
 //in
  $('#submenu').show();
},function(){
 //out
  $('#submenu').hide();
});
于 2013-07-12T23:59:16.070 回答
0

这是我修复代码的建议。
（演示在这里）

$(document).ready(function(){
  $('#submenu').hide();
  $('#menu').on('mouseover', function (){$('#submenu').show()});
  $('#menu').on('mouseout', function (){$('#submenu').hide()});
});
于 2013-07-12T23:59:47.913 回答