CODEWITHSUNDEEP
jquery
joe
joe

Reputation: 1135

How to set submenu to stay open?

<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;
}

Really wanted submenu to stay open after hover on the main navigation, but after googling for some time, it seemed that there are no way to do that. Thought of click that could work. If click on main navigation, it will open submenu till user click on another nav item.

But couldn't get block to show in <li class="sub-nav">. Siblings(), closest(), find() doesn't help to add class block. Not sure why..

Upvotes: 0

Views: 93

Answers (2)

JonasB
JonasB

Reputation: 328

You can do this without jQuery by styling the display property of child element on parent ":hover" and by applying the same styling on child hover.

jsfiddle example.

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;
}

Upvotes: 0

Timur Osadchiy
Timur Osadchiy

Reputation: 6249

Use show() and hide() instead of additional class. Here is the edited code:

$('.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>

Upvotes: 1

Related Questions