Меню jQuery при наведении курсора не исчезает - PullRequest
Новая
       35

Меню jQuery при наведении курсора не исчезает

1 голос
/ 11 апреля 2010

РЕДАКТИРОВАТЬ: Смотрите это в действии здесь: http://jsbin.com/emobi/5 - и это использует mouseenter / mouseleave.

У меня есть базовое меню с использованием некоторых вложенных UL, что, я думаю, довольно стандартно. При наведении курсора на LI из «корневого» меню я хочу, чтобы отображался UL в этом LI. Переместите указатель мыши в другое LI, чтобы отобразить это подменю. Переместитесь вниз в подменю, и оно останется, пока вы наводите курсор на каждый элемент. Он работал с простым набором jQuery.hover (), но потом я столкнулся с проблемами. Когда на странице элементу «root» назначается класс «current-page», и если этот класс существует, я хочу, чтобы он отображал это подменю статически после наведения мыши.

Надеюсь, я объяснил это достаточно хорошо. Я просто бросил переменную в функции наведения, чтобы при наведении мыши она запускала .show () в подменю текущей страницы. Легко. За исключением того, что когда я перемещаю мышь между отдельными LI в подменю, она возвращается обратно в подменю текущей страницы. Поэтому я попытался добавить элемент таймера на основе другого вопроса здесь. Это усугубляло ситуацию - теперь подменю просто не исчезают.

Вот мои CSS, разметка и JS ... Как, черт возьми, я могу заставить эту работу работать правильно?

Markup: 

<div id="menu">
<div id="navbar">
    <ul id="firstmenu">
        <li>
            <a href="http://localhost/site/pageone">page one</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>

        <li>
            <a href="http://localhost/site/pagetwo">barely there</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li class="current-page">
            <a href="http://localhost/site/pagetwo">kith & kin</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>

        </li>
        <li>
            <a href="http://localhost/site/pagethree">focal point</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li>
            <a href="http://localhost/site/pagefour">products</a>
            <ul class="submenu">
                <li><a href="http://localhost/site/pageone/subone">subone</a></li>
                <li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
                <li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
                <li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
                <li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
            </ul>
        </li>
        <li>
            <a href="http://localhost/site/pagefive">clients</a>
        </li>

    </ul>
</div></div>

А вот и CSS: 

    #navbar {
     margin: 0;
     padding: 0;
     border: 0;
     text-align: center;
 }

 #firstmenu {
    margin: 6px auto 0 auto;
    font-size: 16px;
    list-style-type: none;
    letter-spacing: -1px;
 }

 #firstmenu li {
    display: inline;
    position:relative;
    overflow: hidden;
    text-align: center;
    margin-right: 10px;
    padding: 5px 15px;
 }

 #firstmenu a {
    text-decoration: none;
    outline: none;
    color: black;
    font-weight: 700;
    width: 75px;
    cursor: pointer;
 }

.current-page {
     color: white;
     background: url(../images/down_arrow.png) bottom center no-repeat;

}
.current-page a {
     color: white;
     border-bottom: 1px solid black;
}

#firstmenu .current-page a {
    color: white;
}

#firstmenu li.hover {
     color: white;
     background: url(../images/down_arrow.png) bottom center no-repeat;
}
#firstmenu li.hover a {
     color: white;
     border-bottom: 1px solid black;
}

#firstmenu li ul li.hover {
     color: white;
     background: none;
}
#firstmenu li ul li.hover a {
     color: white;
     border-bottom: none;
     text-decoration: underline;
}

#firstmenu li ul {
    width: 900px;
     color: white;
     font-size: .8em;
     margin-top: 3px;
     padding: 5px;
     position: absolute;
     display: none;
}

#firstmenu li ul li {
    list-style: none;
    display: inline;
    width: auto;
}

#firstmenu li ul li a {
    color: white;
    font-weight: normal;
    border: none;
}

.sub-current-page {
    font-weight: bold;
    text-decoration: underline;
}

#firstmenu li ul li.sub-current-page a {
    font-weight: bold;
}

И, наконец, мой не работающий JS (конечно, в $ (document) .ready ()): 

// Initialize some variables
    var hideSubmenuTimer = null;
    var current_page;
$('.current-page ul:first').show();

    // Prep the menu
    $('#firstmenu li').hover(function() {
        // Clear the timeout if it exists
        if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }

        // Check if there's a current-page class set
        if($('li.current-page').length > 0) {
            current_page = $('li.current-page');
        } else {
            current_page = false;
        }

        // If there's a current-page class, hide it
        if(current_page) { current_page.children('ul:first').hide(); }

        // Show the new submenu
        $(this).addClass('hover').children('ul:first').show();

    }, function(){
        // Just in case
        var self = this;
        // Clear the timeout if it exists
        if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }

        // Check if there's a current-page class set
        if($('li.current-page').length > 0) {
            current_page = $('li.current-page');
        } else {
            current_page = false;
        }

        // Set a timeout on hiding the submenu
        hideSubmenuTimer = setTimeout(function() {
            // Hide the old submenu
            $(self).removeClass('hover').children('ul').hide();

            // If there's a current-page class, show it
            if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); }
        }, 500);
    });

Так что же я делаю не так?

В качестве примечания я использую $ ('. Current-page ul: first'). Show (), потому что, если я дал .current-page какую-либо настройку "display" в CSS, он действительно позиционировал ее странно на странице.

Ответы [ 3 ]

1 голос
/ 11 апреля 2010

Ответ заключается в том, что скрипт пытался запустить hover / mouseenter / любые функции в LI's подменю. Предоставляя каждому из корневого меню LI свой класс, теперь он работает. Таким образом, он не вызывает функции в подменю LI. Вот готовая функция: 

$('#firstmenu .root-item').mouseenter(function() {
    $(this).addClass('hover').children('ul:first').show();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').hide();
    }
}).mouseleave(function() {
    $(this).removeClass('hover').children('ul').hide();
    if($('.current-page').length > 0) {
        $('.current-page').children('ul:first').show();
    }
});
0 голосов
/ 11 апреля 2010

Я переписал его, чтобы использовать не hover, а mouseover и mouseout. Не уверен, если вам это нравится, но вот код: 

$(document).ready(function(){
          $(".submenu").hide();
          $("li").mouseover(function(){
            $(this).find('.submenu').show();
            });
          $("li").mouseout(function(){
            $(this).find('.submenu').hide();
            })
});

edit: я потратил время на просмотр вашего кода и нашел оскорбительную строку: 

#firstmenu li {
    display: inline;

Поскольку вложенные списки находятся внутри первого div меню, это относится и к ним. Встроенный вложенный список не может быть размещен и, следовательно, больше не помещается как дочерний элемент своего родительского домена в механизм компоновки. В результате наведение над подменю по-прежнему считается наведением на родительский объект (из-за появления пузырей), но между элементами списка вы больше не будете навязывать родительский объект (как в исходном проекте). Вам нужно переосмыслить дизайн макета, потому что сейчас он ломает движок макета.

Возможно, вам следует также переосмыслить использование списков в качестве таблиц ...

0 голосов
/ 11 апреля 2010

Почему вы возитесь с таймаутами? Должны ли вы просто .toggle()?

...