Question

目前我的网站下拉菜单设置如下：

HTML：

<ul class="primary-navigation">
    <li><a href="/About" id="about"><span>About</span></a></li>
    <li><a href="/Location" id="location"><span>Location</span></a></li>
    <li><a href="/Site-Plan"><span>Site Plan</span></a></li>
    <li><a href="/Specification"><span>Specification</span></a></li>
    <li><a href="/Gallery"><span>Gallery</span></a></li>
    <li><a href="/Investors"><span>Investors</span></a></li>
    <li class="last"><a href="/Contact"><span>Contact</span></a></li>
</ul>
<ul class="secondary-navigation" id="about-menu">
    <li><a href="/Item1">Item1</a></li>
    <li><a href="/Item2">Item2</a></li>
</ul>   
<ul class="secondary-navigation" id="location-menu">
    <li><a href="/Item1">Amenities</a></li>
    <li><a href="/Item2">Connections</a></li>
    <li><a href="/Item3>Location Map</a></li>
</ul>

使用Javascript：

$(document).ready(function () {
    // About
    $("#about").hover(
        function() {
            $("#about-menu").css("display","block");
        },
        function() {
            $("#about-menu").css("display","none");
        }
    );
    $("#about-menu").hover(
        function () {
            $(this).css("display", "block");
        },
        function () {
            $(this).css("display", "none");
        }
    );
    $("#about-menu li").hover(
        function () {
            $("#about-menu").css("display", "block");
        },
        function () {
            $("#about-menu").css("display", "none");
        }
    );
    // Location
    $("#location").hover(
        function () {
            $("#location-menu").css("display", "block");
        },
        function () {
            $("#location-menu").css("display", "none");
        }
    );
    $("#location-menu").hover(
        function () {
            $(this).css("display", "block");
        },
        function () {
            $(this).css("display", "none");
        }
    );
});

CSS：

#header ul.primary-navigation { width: 735px; height: 90px; overflow: auto; position:            absolute; top: 0px; right: 0px; background: #FFFFFF; }
#header ul.primary-navigation li { list-style-type: none; width: 104px; height: 89px;    float: left; position: relative; border-right: 1px solid #FFFFFF; background: #b3b3b3; }
#header ul.primary-navigation li:hover { background: #adcc52; }
#header ul.primary-navigation li.last { border-right: 1px solid #b3b3b3; }
#header ul.primary-navigation li.last:hover { background: #adcc52; border-right: 1px solid #adcc52; }
#header ul.primary-navigation li a { display: block; width: 104px; height: 89px; text-decoration: none; }
#header ul.primary-navigation li a span { color: #FFFFFF; display: block; position: absolute; left: 10px; bottom: 10px; }

#header ul.secondary-navigation { width: 735px; display: none; position: absolute; top:  89px; left: 225px; background: red; overflow: auto; }  
#header ul.secondary-navigation li { width: 735px; height: 30px; position: relative; float: left; /*background: #adcc52;*/ }

导航似乎首先正在工作。但是，似乎每当子菜单处于活动状态时，如果您尝试将鼠标悬停在第一个<li>项之后的任何内容上，则子导航将消失。我不能为我的生活弄清楚为什么会这样！您认为因为<li>项嵌套在父<ul>中，所以它们都会显示，直到您离开<ul>，但它似乎不起作用方式。

有谁知道为什么会这样？

谢谢！

Answer 1

我会在

中说

$("#about-menu li").hover(
    function () {
        $("#about-menu").css("display", "block");
    },
    function () {
        $("#about-menu").css("display", "none");
    }
);

当您离开LI时，将调用第二个回调并且整个菜单消失。未示出更多LI并且不能触发再次显示的菜单。您需要删除此回调。

另一个技巧，而不是css("display...，只需使用.show()和.hide()

我的JQuery导航有什么问题？

1 个答案: