HoverIntent не работает правильно
У меня проблема с hoverIntent (плагин JQuery и JavaScript).
Раскрывающееся меню на моей странице скользит слишком быстро, поэтому пользователи, возможно, не могут навести курсор на другие пункты меню. Чтобы избежать этого, я хочу использовать hoverIntent для тайм-аута сокрытия второго меню.
Мой код:
function lvdropdown(){
var config = {
timeout: 1000
}
jq("#topmenu ul.menu ul").css({display: "none"});
jq("#topmenu ul.menu li").hoverIntent(function(){
jq(this).find('ul:first').css({visibility:"visible", display: "none"}).show('fast');
},function(){
jq(this).find('ul:first').css({visibility:"hidden"});
}, config);
}
jQuery(document).ready(function(jq){
lvdropdown();
});
Я также прочитал, что CSS-файл может быть причиной моей проблемы, поэтому я также опубликую часть меню в стиле CSS:
#topmenu ul.menu, #topmenu ul.menu ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
z-index:999;
display:inline-block;
width: 100%;
}
#topmenu ul.menu li, #topmenu ul.menu ul li {
list-style:none;
}
#topmenu ul.menu {
background-repeat: repeat-x;
}
#topmenu ul.menu li {
float:left;
position:relative;
}
#topmenu ul.menu li a, #topmenu ul.menu li span.separator {
display:block;
padding:5px 15px; /* height of level1 links */
text-decoration:none;
vertical-align:middle;
min-height:24px;
background-repeat: repeat-x;
}
/***** IMAGES *****/
#topmenu ul.menu li a img {
vertical-align:middle;
padding-right: 5px;
}
#topmenu ul.menu li a span {
vertical-align:middle;
}
/***** FONT SIZE *****/
#topmenu ul.menu li a,
#topmenu ul.menu li span.separator,
#topmenu ul.menu li a span {
font-size:14px;
}
#topmenu ul.menu li ul li a,
#topmenu ul.menu li ul li span.separator,
#topmenu ul.menu li ul li a span {
font-size:12px;
}
#topmenu ul.menu li ul li {
border:0 !important;
}
#topmenu ul.menu li.parent a, #topmenu ul.menu li.parent span.separator {
background-image: url(../images/menu-parent-smooth.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 30px;
}
#topmenu ul.menu li.parent a:hover, #topmenu ul.menu li.parent span.separator:hover {
background-image: url(../images/menu-parent-hover-smooth.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 30px;
}
#topmenu ul.menu li#current.parent a, #topmenu ul.menu li#current.parent span.separator {
background-image: url(../images/menu-parent-hover-smooth.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 30px;
}
/***** LEVEL 2 *****/
#topmenu ul.menu ul {
position:absolute;
top:3em; /* double line height of level 1 ul */
display:none;
padding:3px; /* border of level2 ul */
width:214px;
border-radius: 10px;
}
#topmenu ul.menu ul li {
margin:2px;
width:210px;
}
#topmenu ul.menu li ul li a, #topmenu ul.menu li ul li span.separator {
float:left;
padding:4px 8px 4px 8px !important; /* height of level2 links */
height:auto;
width:194px;
background: none !important;
}
#topmenu ul.menu li ul li a:hover {
background: none !important;
}
#topmenu ul.menu li ul li.parent {
background-image: url(../images/menulili_parent.gif) !important;
background-position: right !important;
background-repeat: no-repeat !important;
}
#topmenu ul.menu li ul li.parent:hover {
background-image: url(../images/menulili_parent_hover.gif) !important;
background-position: right !important;
background-repeat: no-repeat !important;
}
#topmenu ul.menu li li.parent a, #topmenu ul.menu li li.parent span.separator,
#topmenu ul.menu li li.parent a:hover, #topmenu ul.menu li li.parent span.separator:hover,
#topmenu ul.menu li li#current.parent a, #topmenu ul.menu li li#current.parent span.separator {
padding-right:8px !important;
}
#topmenu ul.menu ul ul{
top:auto;
}
#topmenu ul.menu li ul ul {
left:190px;
margin:0px 0 0 10px;
}
#topmenu ul.menu li:hover ul ul, #topmenu ul.menu li:hover ul ul ul, #topmenu ul.menu li:hover ul ul ul ul ,
#topmenu ul.menu li.hover ul ul, #topmenu ul.menu li.hover ul ul ul, #topmenu ul.menu li.hover ul ul ul ul{
display:none;
}
#topmenu ul.menu li:hover ul, #topmenu ul.menu li li:hover ul, #topmenu ul.menu li li li:hover ul, #topmenu ul.menu li li li li:hover ul,
#topmenu ul.menu li.hover ul, #topmenu ul.menu li li.hover ul, #topmenu ul.menu li li li.hover ul, #topmenu ul.menu li li li li.hover ul{
display:block;
Я надеюсь, что вы можете помочь мне с моей проблемой и спасибо, что прочитали и нашли время для помощи.
ОБНОВЛЕНИЕ: Я попытался установить интервал в 2000 (мс), и он не показал никакой реакции, может быть, это тоже помогает.
ОБНОВИТЬ:
Здесь я добавлю HTML-структуру. Предметы включены Joomla:
<div id="#topmenu">
<ul class="nav menu nav-pills">
<li class="item-101 current active">Home </li>
<li class="item-108 deeper parent">Unser Seminar
<ul style="visibility: hidden;" class="nav-child unstyled small">
<li class="item-109">Seminarleitung </li>
<li class="item-118">Verwaltung </li>
<li class="item-119">Fachleiter/-innen und Mitwirker/-innen </li>
<li class="item-120">Ausbilder/-innen Fachpraxislehrkräfte </li>
<li class="item-122">Personalrat der Referendare </li>
<li class="item-123">Vertrauensvolle Beratung </li>
<li class="item-124">Förderverein Alumni </li>
</ul>
</li>
<li class="item-125 deeper parent">Ausbildung
<ul style="visibility: hidden;" class="nav-child unstyled small">
<li class="item-126 deeper parent"> </li>
<li class="item-136">Die IHK </li>
<li class="item-137">Fachpraxis-Lehrkräfte </li>
<li class="item-138">Quereinsteiger/innen </li>
</ul>
</li>
</ul>
</div>
1 ответ
ОК - я переформатировал ваш код, теперь должно работать изменение времени ожидания. Я должен был догадаться о структуре HTML, но это иллюстрирует суть.
jQuery(document).ready(function () {
jQuery("#topmenu ul.menu ul").css({
display: "none"
});
jQuery("#topmenu ul.menu li").hoverIntent({
over: function () {
jQuery(this).find('ul:first').show('fast');
},
out: function () {
jQuery(this).find('ul:first').hide();
},
timeout: 2000
});
});
Редактировать:
Ваш HTML мешает стилям, так что если вы удалите style="visibility: hidden;" от <ul style="visibility: hidden;" class="nav-child unstyled small"> а также изменить id из topmenu в id="topmenu" вместо id="#topmenu" все должно работать.
Вы также можете избавиться от этого:
jQuery("#topmenu ul.menu ul").css({
display: "none"
});
Заменив это на CSS того же селектора, как это (так как они выполняют ту же функцию, но CSS загружается первым, вы не хотите FOUC http://en.wikipedia.org/wiki/FOUC):
#topmenu ul.menu ul{
display:none;
}
В демо я добавил цвет фона и ограничил ширину меню, чтобы вы могли видеть, когда вы проводите мышью out,