JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="menu">
Menu knop
</div>

<hr />

<div id="result">
 &nbsp;
</div>

<hr />

<div id="log">
 &nbsp;
</div>

CSS

div {
  display:block;
  background: red
}

JavaScript

var open = false;
delayed = 500;
var openFunction = function (e) {
  if (open) {
    return;
  }
  open = true;
  
  setTimeout (function () {
  	bindClose();
  }, delayed);
  
  $('#result').html('open');
  $('#log').append('opened, ');
};

var closeFunction = function (e) {
  if (!open) {
    return;
  }
  open = false;
  
  setTimeout (function () {
  	bindOpen();
  }, delayed);
  
  $('#result').html('close');
  $('#log').append('closed, ');
}

function bindClose() {
	//first unbind open
  $('#menu').unbind('mouseenter');
  $('#menu').unbind('tap');
  
  //bind clsoe function
  $('#menu').click(closeFunction);
}

function bindOpen() {
	//unbind close functions
  $('#menu').unbind('click');
  
  //bind open functions
  $('#menu').tap(openFunction);
  $('#menu').mouseenter(openFunction);
}

$(function() {
	bindOpen();
});