Как сохранить родительское меню, когда мышь находится в дочернем меню в выпадающем меню - PullRequest
Новая
       0

Как сохранить родительское меню, когда мышь находится в дочернем меню в выпадающем меню

2 голосов
/ 29 ноября 2010

Привет, ребята, мне интересно, как удерживать родительское меню при перемещении мыши в подменю.

Я новичок в jQuery, и мне нравится, что вы помогаете мне с некоторыми советами / подсказками.

ССЫЛКА НА ВЕБ-САЙТ МЕНЮ

Код jQuery 

// Navigation Slide //
var navHover = function () {
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
}
var navRelease = function () {
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
}

$('#navInside a.topLevel').hover(navHover, navRelease);


// Dropdown animation       
            function mainmenu(){
            jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix
            jQuery(" #navInside li").hover(function(){
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500);
                    },function(){
                    jQuery(this).find('ul:first').css({visibility: "hidden"});
                    });
            }

             jQuery(document).ready(function(){                 
                mainmenu();
            });

Навигация HTML 

<div id="navInside">
<li><a class="topLevel" href="">Home</a></li>
<li><a class="topLevel" href="">Options</a>
    <ul>
      <li><a href="">Submenu 1</a></li>
      <li><a href="">Submenu 2</a></li>
    </ul>
</li>
<li><a class="topLevel" href="">Thanks</a></li>

Ответы [ 2 ]

1 голос
/ 29 ноября 2010

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

$('#navInside a.topLevel').parent().hover(navHover, navRelease);

Кстати - Вы можете упростить код navHover / navRelease, используя $ (this) в функциях наведения. Таким образом, вам не нужны конкретные идентификаторы элементов. Вы бы просто нашли их относительно текущего элемента.

0 голосов
/ 29 ноября 2010

Вам не нужен JS для этого вообще. Вот jsFiddle для объяснения ниже:

Вы хотите показать ul, который является потомком li, только когда вы наводите курсор на него. Это обрабатывается li ul (состояние при наведении мыши) и li:hover ul (состояние при наведении курсора).

При наведении на него высота LI изменяется, потому что теперь вы также отображаете UL, поэтому он будет оставаться видимым, пока вы не покинете его область (LI) (которая включает в себя текст +). UL).

Если вам нужна анимация, посмотрите CSS-переходы. Поддержка браузера не очень удобна, но, возможно, то, что вы пытаетесь сделать, будет поддерживаться повсеместно. Точная оценка событий наведения / выключения мыши на элементах, чья область изменяется, может быть непростой задачей. Я бы порекомендовал использовать JS, только если вам действительно нужно что-то подобное.

...