jQuery - выпадающее меню показать/скрыть

Question

Я пытаюсь найти чистый способ отображения выпадающего списка и заставить его уйти при выходе. Это звучит как кусок пирога, но это не из-за иерархии ul/li.

Вот структура меню:

<li class="has-submenu navigation-link"> 
<a href="<link>">TEST</a> 
<ul class="submenu menu vertical" data-submenu=""> 
<a href="<link>">TEST</a> 
</ul> 
</li> 

по умолчанию, .submenu устанавливается на дисплей: нет

Я использую следующий JQuery:

$(".has-submenu").hover(function() 
    { 
     $(this).children('ul').slideDown(); 
    }); 
$(".submenu").mouseout(function() 
    { 
     $(this).delay(800).fadeOut(100); 
    }); 

Когда я иду снова. has-submenu, второй div появляется, но когда я уезжаю, div исчезает, а затем появляется снова, потому что, уходя из .submenu, я также ударяю .has-menu по пути.

Есть ли способ избежать попадания в основной div на моем пути, чтобы достичь желаемого эффекта?

Благодаря

Laurent

Answer 1

Вы не можете иметь <a> непосредственно внутри <ul>. Поскольку вы используете событие hover, вы можете добиться этого в самом CSS. Этот код также масштабируется, когда у вас больше UL и LI, тогда как если вы хотите эффект затухания, вы также можете использовать transition.

ul li ul {display: none;} 
 
ul li:hover ul {display: block;}

<ul> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

С Animation

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-decoration: none; 
 
} 
 
ul li { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 
ul li ul { 
 
    position: absolute; 
 
    left: 0; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s linear; 
 
    -moz-transition: all 0.5s linear; 
 
    -ms-transition: all 0.5s linear; 
 
    -o-transition: all 0.5s linear; 
 
    transition: all 0.5s linear; 
 
} 
 
ul li:hover { 
 
    background: #ccf; 
 
} 
 
ul li:hover ul { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="has-submenu navigation-link"> 
 
    <a href="">TEST</a> 
 
    <ul class="submenu menu vertical" data-submenu=""> 
 
     <li> 
 
     <a href="">TEST</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>