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="email">
    <span id='label'></span>
    <input type="text" id="input" />
</div>



<div id="box">
    <div class='dropdown' id='ddmenu'>
        <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email  <b class="caret" id='caret'></b></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;
}

#email {
    display: inline-block;
    height: 50px;    
    padding: 15px;
    background: #eee;
    margin: 0 0 50px;
}

#label {
    width: 70px;        
    display: inline-block;
}

JavaScript

$(function(){
    menu = $('#box').html();
    $('#box').hide();
    

    $("body").mousedown(function(event) {
        var dom = $(event.target).attr('id');
        var top = $(event.target).parent().attr('id');
        var lower = $(event.target).parent().parent().parent().attr('id');
        
        if (dom === 'email' || dom === 'label' || dom === 'input' || dom === 'caret' || dom === 'ddmenu') {
            $('#label').html(menu);
        } else if (top === 'ddmenu' || lower === 'ddmenu') {
            
        } else {
            $('#label').empty();
        }
        
    });
    
    $(document).on('click','.dropdown ul a',function(){
        var text = $(this).text();
        $(this).closest('.dropdown').children('a.dropdown-toggle').html(text + ' <b class="caret"></b>');
    });   
});