JQuery HoverIntent для невложенного содержимого меню

Я использую JQuery HoverIntent для создания меню.

Вот основная структура моего HTML-кода:

<ul>
    <li><a href="#" class="current">Home</a></li>
    <li id="sh-zone-menu-sub-services" class="submenu"><a href="#">Services</a></li>
    <li id="sh-zone-menu-sub-support" class="submenu"><a href="#">Support</a></li>
    <li id="sh-zone-menu-sub-contact" class="submenu"><a href="#">Contact</a></li>
    <li><a href="#">About Us</a></li>
</ul>
<div id="sh-zone-menu-sub-services-target" class="submenu-content">Services Content</div>
<div id="sh-zone-menu-sub-support-target" class="submenu-content">Support Content</div>
<div id="sh-zone-menu-sub-contact-target" class="submenu-content">Contact Content</div>

А вот код JQuery:

var $_ = jQuery;
$_(document).ready(function(){  

    function showSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).addClass("showsubmenu");
        $_("#"+source_id+"-target").show();
    }

    function hideSubMenu()
    {
        var source_id = $_(this).attr("id");
        $_(this).removeClass("showsubmenu");
        $_("#"+source_id+"-target").hide();
    }

    var subMenuConfig = 
    {
        interval: 100,
        sensitivity: 4,
        over: showSubMenu,
        timeout: 300,
        out: hideSubMenu 
    };

    $_("ul li.submenu").hoverIntent(subMenuConfig);
});

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

Ранее HTML-код был настроен так, что элементы DIV содержимого подменю были вложены в теги LI, и это работало нормально, т. е. при наведении на ссылку меню и содержимое. Однако у меня были проблемы с позиционированием для IE (поскольку содержимое меню занимает большую часть страницы), поэтому мне нужно было убрать их из тегов LI.

То, как я это сделал, теперь работает нормально для IE (в зависимости от положения CSS), но hoverIntent не работает.

Есть ли способ использовать hoverIntent, когда содержимое моего меню не вложено в теги LI?!

Спасибо.


jquery hoverintent
person BannerMan    schedule 07.06.2011    source источник
comment
Проверьте: brandammo.co.uk/blog/2011/02/ это полный пример.   -  person John Magnolia    schedule 12.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

Я знаю, что вы опубликовали этот вопрос некоторое время назад, и у меня ограниченный опыт работы с плагином hoverIntent, но вот что я знаю, глядя на код. События mouseenter и mouseleave привязаны к объекту, к которому вы привязываете hoverIntent. Код в hoverIntent, который привязывается к вашему объекту:

return this.bind('mouseenter', handleHover).bind('mouseleave', handleHover);

Итак, если вы используете ul и привязываетесь к элементам li, что-то вроде этого:

$("ul#ReportNav li").hoverIntent(config);

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

Итак... если вы говорите... оболочка div с div внутри в качестве триггера наведения, вы хотите просто связать hoverIntent с правильным синтаксисом, и он отлично работает (все во всплывающем окне является дочерним элементом наведенного элемент):

<div id="ListContainer">
<div id="ListTableContainer">
<!-- anything you want -->
</div>
</div>

$("div#ListContainer div#ListTableContainer").css({ 'opacity': '0' });
$("div#ListContainer").hoverIntent(config);

Я искал что-то подобное и постоянно сталкивался с этим вопросом. Думал, что отвечу.

person Paul Perrick    schedule 06.08.2011