JQuery меню проблема при наведении - PullRequest
Новая
       5

JQuery меню проблема при наведении

0 голосов
/ 27 июля 2011

У меня довольно простое меню: 

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li><a href="consumers.htm" title="" class="consumers">Consumers</a>
         <ul id="consumer-menu">
            <li> --snip--

и: 

    $(document).ready(function() {
        $('.consumers').hover( function() {
            $("#consumer-menu").fadeIn();
        }, function() {
            $("#consumer-menu").fadeOut();
        });
    });

Проблема в том, что когда вы убираете мышь от* (но включая .consumers).

Спасибо за помощь!

Джон.

Ответы [ 2 ]

2 голосов
/ 27 июля 2011

Самый простой ответ, который я могу придумать, учитывая контекст, - это реструктурировать ваш HTML следующим образом: 

<ul id="menu">
<!-- TemplateBeginEditable name="mainmenu" -->
    <li><a href="index.htm" title="" class="home">Home</a></li>
    <li class="consumers"><a href="consumers.htm" title="">Consumers</a>
         <ul id="consumer-menu">
             <li>test</li>
             <li>test</li>
         </ul>
    </li>
</ul>

, который должен работать с jQuery без изменений.

(протестировано с http://jsfiddle.net/MgbdN/)

0 голосов
/ 27 июля 2011

Что вы думаете о решении здесь: http://jsfiddle.net/WDktv/

В основном, когда вы наводите курсор мыши на ul (или узел меню, если быть более общим), вы должны исчезнуть в его дочернем меню ul(узел меню) 

<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
    <a href="#">Three (+)</a>
    <ul style="display:none;">
        <li><a href="#">Three and a half</a></li>
        <li><a href="#">Three and three quarters</a></li>
    </ul>
</li>
<li><a href="#">Four</a></li>


$('li').hover(
    function(){$("ul", this).fadeIn()}, 
    function(){$("ul", this).fadeOut()})
...