JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id='one'>
    <input type='text' id='aaa'/>
    <span id='bbb'></span>
</div>
<div id='another'>
    <input type='text'/>
    <span></span>
</div>

<p class='demo1'></p>
<p class='demo2'></p>

<div id="box">
    <div class='dropdown' id='ccc'>
        <a class='dropdown-toggle' data-toggle='dropdown' href='#' id='asdf'>Email</a>
        <ul id='menu1' class='dropdown-menu'>
            <li><a href='#'>Work</a></li>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>Mobile</a></li>
        </ul>
    </div>
</div>

CSS

body {
    margin: 50px;
}

#one, #another {
    padding: 15px;
    background: #eee;
    margin: 0 0 50px;
}

JavaScript

$(function() {
    menu = $('#box').get(0);

    $("body").mousedown(function(event) {
        var dom = $(event.target).attr('id');
        var top = $(event.target).parent().parent().attr('id');
        var lower = $(event.target).parent().parent().parent().attr('id');
        
        if (dom === 'one' || dom === 'aaa' || dom ==='bbb' ) {
            $('#bbb').html(menu);
        } else if (top === 'box' || lower === 'ccc') {

        } else {
            $('#bbb').empty();
        }
        
    }); 
    

  
});