JSFiddle - React, Tailwind, and code Playground

by bjoerne

HTML

<link rel="stylesheet" href="https://www.proinnovera.com/wp-content/themes/proinnovera/css/bootstrap-proinnovera.min.css">
<script src="https://www.proinnovera.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
<script src="https://www.proinnovera.com/wp-content/themes/proinnovera/js/bootstrap.min.js?ver=3.3.1"></script>
<nav class="navbar navbar-default navbar-fixed-top site-header__navbar">
		<div class="container">
			<a class="skip-link screen-reader-text" href="#main">Direkt zum Inhalt</a>
			<a class="home-link" href="http://192.168.0.20/proinnovera/de/" title="proinnovera" rel="home">
				<img src="http://192.168.0.20/proinnovera/wp-content/uploads/2016/07/proinnovera_cro_logo.png" class="site-header__logo" alt="proinnovera">
			</a>
			<div class="navbar-right site-header__navbar-right">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle site-header__navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
							<span class="sr-only">Menü ein-/ausklappen</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse site-header__navbar-collapse" id="navbar-collapse-main">
					<ul class="nav navbar-nav">
						<li id="menu-item-1646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1646"><a href="http://192.168.0.20/proinnovera/de/ueber-uns/">Über uns</a></li>
<li id="menu-item-2758" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-2758"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#" aria-expanded="false">Leistungen <b class="caret"></b></a>
<ul class="dropdown-menu">
	<li id="menu-item-2757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2757"><a href="http://192.168.0.20/proinnovera/de/leistungen-uebersicht/">Leistungen Übersicht</a></li>
	<li...

CSS

#console {
  margin-top: 20px;
  border: 1px solid white;
  min-height: 100px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

JavaScript

function appendToConsole(text) {
	var $console = jQuery('#console');
	var html = $console.html();
  html += text + '<br />';
  $console.html(html);
}
jQuery(document).ready(function() {
	var toggleMouseover = function() {
  	appendToConsole('toggleMouseover');
		var $toggle = jQuery(this);
		var $parent = $toggle.parent();
		if ($parent.hasClass('open')) {
	  	appendToConsole('parent has class open');
			return;
		}
		var toggleParentMouseout = function() {
	  	appendToConsole('toggleParentMouseout');
			$toggle.data('trigger-click-through-mouseout', true);
			window.setTimeout(function() {
		  	appendToConsole('timeout toggleParentMouseout');
				if (!$toggle.data('trigger-click-through-mouseout')) {
			  	appendToConsole('no trigger-click-through-mouseout found');
					return;
				}
				if ($parent.hasClass('open')) {
			  	appendToConsole('parent has class open');
					$toggle.trigger('click');
					$toggle.blur();
				}
				$parent.off('mouseout', null, toggleParentMouseout);
				$parent.off('mouseover', null, toggleParentMouseover);
			});
		};
		var toggleParentMouseover = function() {
      appendToConsole('toggleParentMouseover');
			$toggle.data('trigger-click-through-mouseout', false);
		};
		jQuery($toggle).trigger('click');
		$toggle.data('clicked-on-mouseover', true);
		$parent.on('mouseout', toggleParentMouseout).on('mouseover', toggleParentMouseover)
		window.setTimeout(function() {
      appendToConsole('timeout toggleMouseover');
			$toggle.data('clicked-on-mouseover', false);
		}, 400);
	};
	var toggleClick = function() {
    appendToConsole('toggleClick');
		var $toggle = jQuery(this);
		if ($toggle.data('clicked-on-mouseover')) {
    appendToConsole('clicked-on-mouseover found');
			return false;
		}
	};
	jQuery('.site-header__navbar .dropdown-toggle').on('mouseover', toggleMouseover).on('click', toggleClick);
});