Disable boostrap submenu on hover

Question

I have a nav menu using Boostrap 3, and I can't figure out how to disable the "on hover" functionality of the submenu. i want the submenu to only open on click.

https://jsfiddle.net/elalgarro/q1vddxhx/

Something like :

$(".dropdown-submenu").hover(function(){ dontOpen() })
$(".dropdown-submenu").click(function(){ openIt() })

But I can't get it to not open on hover.

EDIT:

Credit to Zakaria Acharki worked like a charm :)

in my actual app .dropdown-submenu:hover is buried somewhere in the bootstrap css file. so I changed my css file to

.dropdown-submenu:hover>.dropdown-menu{ 
      display:none;
}

Then this jQuery :

$('.dropdown-submenu').on('click', function(e){
    e.stopPropagation();

    $(this).find('.dropdown-menu:eq(0)').toggle();
})

Note the submenu now does not close, more code needs to be added to close the submenu when you click away.

Answer 1

Working Fiddle.

First thing, you've to remove this part from your CSS code :

.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

Then write the code that do the same thing using jQuery :

 $('.dropdown-submenu').on('click', function(e){
    e.stopPropagation();

    $(this).find('.dropdown-menu:eq(0)').toggle();
})

Edit: To close the menu when you click away just attach a click event to the whole html :

$('html').click(function() {
   $('.dropdown-submenu ul').hide();
});

$('.dropdown-submenu').on('click', function(e) {
  e.stopPropagation();

  $(this).find('.dropdown-menu:eq(0)').toggle();
})

$('html').click(function() {
  $('.dropdown-submenu ul').hide();
});

#parentMenu {
  display: block;
  top: 0;
}


/* Helps position submenu */

.dropdown-submenu {
  position: relative;
}


/* Menus under the submenu should show up on the right of the parent */

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}


/* Add carot to submenu links */

.dropdown-submenu>a:after {
  display: block;
  float: right;
  /*simple */
  content: "►";
  color: #cccccc;
  /* looks a little better */
  content: " ";
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}


/* Change carot color on hover */

.dropdown-submenu:hover>a:after {
  border-left-color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" />
<ul class="dropdown-menu" id="parentMenu" role="menu" aria-labelledby="dropdownMenu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>

  <!-- Child Menu -->
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>

      <!-- Grandchild Menu -->
      <li class="dropdown-submenu">
        <a href="#">More..</a>
        <ul class="dropdown-menu">
          <li><a href="#">3rd level</a></li>
          <li><a href="#">3rd level</a></li>
        </ul>
      </li>

      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
</ul>

</li>
</ul>