javascript - 使用 Javascript if 语句以及 and 运算符和选择器来创建导航栏

Question

我正在尝试使用 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>

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

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

Answer 1

您只需使用 CSS 即可实现:

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

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