Что не так с моей навигацией JQuery? - PullRequest
Новая
       42

Что не так с моей навигацией JQuery?

1 голос
/ 14 октября 2011

В настоящее время у меня есть настройки выпадающего меню для моего сайта следующим образом:

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>, но, похоже, это не сработает.

Кто-нибудь знает, почему это происходит?

Спасибо!

1 Ответ

0 голосов
/ 14 октября 2011

Я бы сказал, что в 

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

Когда вы покидаете LI, вызывается второй обратный вызов, и все меню исчезает.Другие LI не отображаются и не могут вызвать отображение меню снова.Вам необходимо удалить этот обратный вызов.

Еще один прием, вместо css("display..., просто используйте .show() и .hide()

...