Question

我遇到了jquery导航的一些问题。当我将鼠标悬停在菜单项上时，会出现一个子菜单项，我可以将鼠标悬停在这些项目上，我的问题是当我将鼠标悬停在导航项或任何子项上时，子菜单仍会显示。我的问题是当你超过子菜单项时，如何让我的子菜单项不显示？如果你将鼠标悬停在菜单项或子菜单项上，我试图让子菜单项不显示（我真的希望这是有意义的）

这是我的代码：

    $(".galleryNavToggle").on("mouseenter", function (event) {
    $('#headerNavGallery, #headerNavInfo').hide();
    $("#headerNavGallery").show();
});

$(".galleryNavInfoToggle").on("mouseenter", function (event) {
    $('#headerNavGallery, #headerNavInfo').hide();
    $("#headerNavInfo").show();
});

HTML

<div class="headerNav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#" class='galleryNavToggle'>Gallery</a></li>
<li><a href="#" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="Categories.php?action=view">Categoies</a></li>
<li><a href="Products.php?action=view">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="willRuppel.php?action=view">William Ruppel</a></li>
<li><a href="CV.php?action=view">CV</a></li>
<li><a href="artistBio.php?action=view">Artist Bio</a></li>
<li><a href="Video.php?action=view">Video</a></li>
<li><a href="contact.php?action=view">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

如果有人能指出我的方向非常棒，我现在已经有几个星期的问题了，而且无法找到解决方案，你可以在http://www.willruppelglass.com

看到这个问题

谢谢， Ĵ

Answer 1

这看起来像是一个体面的教程，用于做下拉式菜单。你应该检查出来并重构你的HTML和CSS。您不需要使用javascript下拉菜单。 http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

干杯！

Answer 2

尝试将导航放在一个列表下，然后使用.hover()来操作display css属性。摆弄它here。

列表层次结构：

[nav container]
  [primary nav item]
    [secondary nav item]
    [secondary nav item]
  [primary nav item]
    [secondary nav item]
    [secondary nav item]
    [secondary nav item]

JS：

$(document).ready(function(){
        $('#nav-container li.primary-nav-item').hover(
            function() { $('ul', this).css('display', 'block'); },
            function() { $('ul', this).css('display', 'none'); });
    });

Jquery导航和子导航悬停

2 个答案: