Stop function when clicked

Question

My code will show the menu's submenu on hover, now I don't want to run this code if my button is clicked. How can I do this? Both ' subMenuDropDown.preventDefault(); ' and subMenuDropDown.stopPropagation(); don't do the trick.

JsFiddle : https://jsfiddle.net/k4ftf4tx/

$('.menu ul li ul').hide();
$('.menu ul li').hover(function(subMenuDropDown) {
  $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
}, function() {
  $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
});

$('.mobileMenuButton').click(function() {
  $('.menu').toggle();
  subMenuDropDown.preventDefault();
});

As you can see on click it will toggle the menu, but on hover it will still slideDown the submenu.

Answer 1

  // Make submenu dropdown on hover $('.menu ul li ul').hide(); $('.menu ul li').hover(function(subMenuDropDown) { $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow'); }, function() { $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast'); }); $('.mobileMenuButton').click(function() { $('.menu').toggle(); $('.menu ul li').off('mouseenter').off('mouseleave'); }); 

 .menu { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mobileMenuButton" role="button"> <p> Menu </p> </div> <div class="menu"> <ul> <li><a href="">Something</a> <ul> <li>Something else</li> </ul> </li> </ul> </div> 

http://api.jquery.com/off/ As I was too fast: How do I unbind "hover" in jQuery?

Answer 2

To hover on desktop sites, but us the click on mobile sites you'd need to check to see if its a mobile device and implement your hover accordingly. If you're using a framework like Bootstrap, lots of that work is already done for you.

If not, you can check for mobile devices using something like this: Detecting a mobile browser

Implemented in your code, you'd first detect the device type. If its desktop, add a class and bind your hover event to that menu and class. The end result is that you get the hover on desktop, but mobile devices must use the click.

Something like this would work:

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}


if(!window.mobilecheck()) {
    $('.menu').addClass('isDesktop');
}
// Make submenu dropdown on hover


// Make submenu dropdown on hover
  $('.menu.isDesktop ul li ul').hide();
  $('.menu.isDesktop ul li').hover(function(subMenuDropDown) {
        $(this).find("ul").first().stop(true, true).delay(60).slideDown('slow');
  }, function() {
        $(this).find("ul").first().stop(true, true).delay(60).slideUp('fast');
  });

  $('.mobileMenuButton').click(function() {
    $('.menu').toggle();
  });

You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/k4ftf4tx/3/

Hope that helps!