ira2015 ira2015 - 1 month ago 7
jQuery Question

How to keep menu dropdown shown, navigate through menu items and dropdown items and close on 'close' button

I did the search but was no able to find the solution.
I need a dropdown menu to be open always, even through navigation to other menu items and dropdown menu items. And be able to close only on .close button.
on mouseenter piece:

$('.main-nav ul > li').mouseenter(function(e){
$(this).addClass('active').find('.dropdown-menu').show();
}).mouseleave(function(e){
$(this).removeClass('active').find('.dropdown-menu').hide();

});


on button click piece:

$('.dropdown-menu .close').click( function(e){
e.stopPropagation();
$('.dropdown-menu').hide();
$('.dropdown .dropdown-toggle').parent().removeClass('active');
console.log('close btn!');
});


I can check also, if clicked outside of the menu:

var container = $('.dropdown');

//check if the clicked area is dropdown or not
if (container.has(e.target).length === 0) {
$('.dropdown-menu').hide();
console.log('clicked out!');
}


But how to keep the dropdown always shown aka Bootstrap?
and only close on button '.close' or re-load?
I can implement it on click, it works as I need, but the request is to do it on hover. Show dropdown items on hover like MegaNav, able to change on hover over all menu items and close ONLY on button, not on mouseleave. Same time able to navigate through top menu items and all subs dropdown items.

Fiddle:
https://jsfiddle.net/b9Lgvuom/

Answer

Thank you to jQuery forum and JΛ̊KE :-) Here is the solution:

$(document).ready(function () {
$('.main-nav ul > li').mouseenter(function(e){
		$('.active').removeClass('active').find('.dropdown-menu').hide();
        $(this).addClass('active').find('.dropdown-menu').show();
     }); 
 $('.dropdown-menu .close').click( function(e){
        e.stopPropagation();
        $(this).closest('.dropdown-menu').hide().parent().removeClass('active');
        console.log('close btn!');
    });
    
});
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.dropdown {
    position: relative;
    display: block;
    float: left;
    padding-right: 10px;
    margin-right: 15px;
}
.dropdown.active > a {
  color: green;
}
.dropdown-menu {
    width: 100%;
    top: 33px;
    min-width: 300px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
    background: #f7f7f7;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0px;
    display: none;
    float: left;
}

.dropdown-menu .dropdown-wrapper {
    position: relative;
}
.dropdown-menu .dropdown-wrapper .close {
    position: absolute;
    height: 25px;
    width: 25px;
    border: 0;
    top: 5px;
    outline: none;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    background: none;
}
.dropdown-menu .dropdown-wrapper .close:before, .dropdown-menu .dropdown-wrapper .close:after {
    content: "";
    opacity: 1;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}
.dropdown-menu .dropdown-wrapper .close:before {
    transform: rotate(45deg);
}
.dropdown-menu .dropdown-wrapper .close:after {
    transform: rotate(-45deg);
}
.category-menu a {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
  <ul>
    <li class="dropdown">
      <a href="#" class="toggle">Category 1</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 2</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 3</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 4</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
  
</div>