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='ccc'>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 = document.getElementById('box');

    $("body").mousedown(function(event) {
        var foo = event.target.id;                 
        if (foo === 'one' || foo === 'aaa' || foo === 'bbb') {
            $('#bbb').html(menu);
        } else {
        };
    }); 
    
    $("body").mousedown(function(event) {
        $('.demo1').text(event.target.nodeName);
    });

  
});