Wordpress - main navigation click to open sub-menu

Question

I've been stumped by the site i'm working.

On some browsers it opens and closes the sub menu when hovering, on others it works by clicking and they stay open when on a page in the sub menu. I want to force sub menu navigation by clicking text & arrow and remove hovering to open sub menu completely. Anyone know how to go about this?

Some parts of the code:

css

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 12px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.625;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #3699dc;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}

jquery

}(jQuery);
;(function($){
    'use strict';
  $(document).ready(function() {
    $('.toggle-sidebar').click(function() {
      $('.row-offcanvas').toggleClass('active');
    });
    $('.toggle-navigation').click(function() {
      $(this).toggleClass('open').next('#site-navigation').slideToggle(300);
    });

    $('#site-navigation .sub-menu, #site-navigation .children').before('<i class="fa fa-caret-right"></i>');

    if(!!('ontouchstart' in window)){
      $('#site-navigation .menu-item-has-children .fa, #site-navigation .page_item_has_children .fa')
      .click(function() {
        $(this).toggleClass('open').next('ul').slideToggle(300);
      });
    } else {
      $('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children')
      .not('.current-menu-parent, .current_page_parent, .current_page_ancestor, .current-menu-ancestor')
      .hover(function() {
        $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(200).slideDown();
      },function() {
        $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(500).slideUp();
      });
    }
  });
})(jQuery);

Answer 1

I was able to fix it with this: http://jsfiddle.net/6augy27b/21/

(function($){
  $(document).ready(function() {
    $('.toggle-sidebar').click(function() {
      $('.row-offcanvas').toggleClass('active');
    });

    $('.toggle-navigation').click(function() {
      $(this).toggleClass('open').next('#site-navigation').slideToggle(300);
    });

    $('#site-navigation .sub-menu, #site-navigation .children').before('<i class="fa fa-caret-right"></i>');

    if(!!('ontouchstart' in window)){
      $('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children')
      .click(function() {
        $(this).children("fa").toggleClass('open').next('ul').slideToggle(300);
      });
    } else {
      $('#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children')
      .not('.current-menu-parent, .current_page_parent, .current_page_ancestor, .current-menu-ancestor')
      .click(function() {

        $(this).children('.fa').toggleClass('open');
        $(this).children('ul').stop(true, true).delay(200).slideToggle();

     /* },function() {
        $(this).children('.fa').toggleClass('open')
        $(this).children('ul').hide();
        //stop(true, true).delay(500).slideUp();
        */
      });
    }
  });
})(jQuery);

Answer 2

I think the problem is that you are using .hover() on your menu.

Take a look at your code

if(!!('ontouchstart' in window)){
  // .....
} else {
 $('#some-selectors').not('#some-selectors-2').hover(function(){
    // ...
 },function(){
   // ...
 });
}

change .hover() to .click() will be fine

if(!!('ontouchstart' in window)){
 // .....
} else {
$('#some-selectors').not('#some-selectors-2').click(function(){
 $(this).children('.fa').toggleClass('open').next('ul').stop(true, true).delay(200).slideToggle();
 }
}