title: How to effectively unbind() hoverintent() from an element
body: <p>I'm using the <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="nofollow noreferrer">HoverIntent</a> plugin to create hover drop-downs in my Bootstrap 3 navigation. However, for smaller sizes I want to still use the native click trigger to activate the dropdowns and not the hover. I'm trying to use <a href="http://wicky.nillia.ms/enquire.js/" rel="nofollow noreferrer">enquire.js</a>, which allows me to call a function when the screen size enters a specified width, and another when it leaves that width. This is my code so far:</p>
  
  <pre><code>enquire.register("screen and (min-width: 767px)", {
   match : function() {
    hoverIntentInit();
   },
   unmatch : function() {
    removeHoverIntent();
   }
  });
  
  function removeHoverIntent(){
    // remove the hoverintent() function &lt;-- this is what I need
  }
  
  function hoverIntentInit(){
    var config = {
       timeout: 900,
       over: showMenu,
       out: hideMenu};
   $('.dropdown').hoverIntent(config);
  }
  function showMenu(){
    // code that shows the dropdown (not important)
  }
  function hideMenu() {
    // code that hides the dropdown (not important)
  }
  </code></pre>
  
  <p>I found a similar question <a href="https://stackoverflow.com/questions/8151278/jquery-unbind-or-rebind-hoverintent">here</a> from few years ago. However, the answers over there either don't work or they they remove both the hoverIntent and the click events from the elements which is not what I want (I want the native Bootstrap click event to remain).</p>
  
  <p>Please help me with this, I've spent more than a day on this and still I can't find a solution.</p>
  
  <p>Thanks!</p>