JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<ul class="drop" id="loginWrap">
    <li class="">
        <span class="loginBtn">Login</span>
        <div class="login dropDown dropDownRight hover hidden">
            <div class="logDropDown">
                <form action="http://192.168.56.101:8300/login" method="post">
                    <input type="text" value="E-Mail" name="username" class="feld username clear idleField">
                    <input type="password" value="Passwort" maxlength="30" size="20" name="password" class="feld passwordLogin clear idleField">
                    <input type="checkbox" class="rememberLogin" id="rememberMe" name="rememberMe">
                    <label for="rememberMe">Angemeldet bleiben</label><br>
                    <button value="Absenden" type="submit" title="Anmelden" class="clickBtnBig"><span>Anmelden</span></button>
                </form>
    
                <div class="nologin">
                    <a href="#" rel="nofollow" class="dropDownLink">Passwort vergessen</a>
                    <a href="#" rel="nofollow" class="dropDownLink">Registrieren</a>
                </div>
            </div>
        </div>
    </li>
</ul>

CSS

body{min-height:600px}
.drop li{background:#ccc}
.js .hidden {display:none}
.active {background:red}

JavaScript

(function($, window, undefined) {
    $('body').addClass('js');
    var timeout, //timeout zum login schließen
        hasFocus = false,
        //login hat keinen Focus
        hideLogin = function(t) { //verstecke Login mit Timeout
            //Abbruch bei focus
            if (!hasFocus) {
                return true;
            }
            //schließen und aktiv-klasse entfernen
            timeout = window.setTimeout(function() {
                $('div.login')
                    .addClass('hidden')
                    .prev('span')
                    .removeClass('active');
                hasFocus = false;
            }, t);
        };


    $('span.loginBtn').bind({
        'mouseenter': function() {
            //zeige login
            $(this).addClass('active').next('div').removeClass('hidden');
            hasFocus = true;
        },
        'mouseleave': function() {
            //verstecke login, wenn es keinen focus mehr hat
            hideLogin(2000);
        },
        'click': function() {
            //verstecke login, bei buttonclick
            hideLogin(0);
        }
    })
    .next('div.login').bind({
        'mouseenter': function() {
            //login weiter anzeigen
            $(this).removeClass('hidden');
            hasFocus = true;
            window.clearTimeout(timeout);
        },
        'mouseleave': function() {
            //unterbrechen, wenn element focus hat
            if($(this).find('input, label, a').is(':focus')){
                return;
            }
            //verstecke login, wenn es keinen focus mehr hat
            hideLogin(3000);
        }
    })
    .find('input, a').focusin(function() {
        //formularelement-focus = hasFocus
        hasFocus = true;
    });
    
    //verstecke login, bei bodyclick
    $('body').click(function(e) {
        //abbrechen, wenn geklicktes element im Formular ist
        if ($.contains($('div.login')[0], e.target)) {
            return;
        }
        //sonst...