jquery导航和子导航悬停答案

【问题标题】：Jquery navigation and sub navigation hoverjquery导航和子导航悬停
【发布时间】：2012-03-31 06:40:54
【问题描述】：

我在使用 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看到这个

谢谢， J

【问题讨论】：

标签： jquery html css navigation

【解决方案1】：

这看起来像是一个不错的下拉式菜单教程。您应该检查一下并重构您的 html 和 css。您不需要为下拉菜单使用 javascript。 http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

干杯！

【讨论】：

【解决方案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'); });
    });

【讨论】：

如果您将所有导航项放在一个列表或 div 下，这可能会更容易。