Как установить подменю, чтобы оставаться открытым?

Question

<li class="submenuList item-with-ul"> 
    <a href="#">Blalab</a> 
    <ul class="sub-nav" style="display: none;"> 
    <li><a href="#">Highlights</a></li> 
    <li><a href="#">Invited</a></li> 
    <li><a href="#">Talks</a></li> 
    </ul> 
</li> 



$('.item-with-ul').on('click', function(){ 
     alert('work');//works 
     $(this).siblings('.sub-nav').addClass('block'); 
     $('.block').removeClass('block'); 
}); 

.block{ 
    display:block!important; 
} 

Действительно захотелось подменю, чтобы оставаться открытым после наведения на главную навигацию, но после поиска в течение некоторого времени казалось, что нет никакого способа сделать это. Мысль щелчка, который мог бы работать. Если щелкнуть по основной навигации, он откроет подменю, пока пользователь не нажмет на другой навигационный элемент.

Но не смог получить блок для отображения в <li class="sub-nav">. Siblings(), closeest(), find() не помогают добавить блок класса. Не знаю, почему ..

Answer 1

Использовать show() и hide() вместо дополнительного класса. Вот отредактированный код:

$('.item-with-ul').on('click', function(){ 
 
     $('.sub-nav').hide(); 
 
     $('.sub-nav', $(this)).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <ul> 
 
     <li class="submenuList item-with-ul"> 
 
     <a href="#">Blalab</a> 
 
     <ul class="sub-nav" style="display: none;"> 
 
      <li><a href="#">Highlights</a></li> 
 
      <li><a href="#">Invited</a></li> 
 
      <li><a href="#">Talks</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="submenuList item-with-ul"> 
 
     <a href="#">Another Bla</a> 
 
     <ul class="sub-nav" style="display: none;"> 
 
      <li><a href="#">Highlights</a></li> 
 
      <li><a href="#">Invited</a></li> 
 
      <li><a href="#">Talks</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul>

Answer 2

Вы можете сделать это без Jquery по стилизации отображения свойства дочернего элемента на родитель «: парение» и применяя один и тот же стиль на ребенок парении.

jsfiddle пример.

http://jsfiddle.net/unbeq63p/1/

<ul> 
<li class="item">Parent 
    <ul class="submenu"> 
     <li>Child</li> 
     <li>Child</li> 
    </ul> 
</li> 
<li class="item">Parent 
    <ul class="submenu"> 
     <li>Child</li> 
     <li>Child</li> 
    </ul> 
</li> 
</ul> 

.submenu{ 
    display:none; 
} 
.item:hover > .submenu { 
    display:block; 
} 
.submenu:hover{ 
    display:block; 
}