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>

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

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

Answer 1

你只能做CSS：

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

DEMO ：http://jsfiddle.net/Wp5sF/

Answer 2

的 jsFiddle Demo 的

你应该利用jQuery's hover：
，在这些方面做更多的事情
$('#submenu').hide(); $('#portmenu, #first, #second, #third').hover(function(){ //in $('#submenu').show(); },function(){ //out $('#submenu').hide(); });

Answer 3

以下是我修改代码的建议（Demo here）

$(document).ready(function(){
  $('#submenu').hide();
  $('#menu').on('mouseover', function (){$('#submenu').show()});
  $('#menu').on('mouseout', function (){$('#submenu').hide()});
});

使用Javascript if语句和运算符和选择器创建导航栏

3 个答案: