JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
        <div id="box">
            <div class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Email<b class='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>


<div class='sss aaa'>
    <div></div>
    <a href='#'>click</a>
</div>
<div class='sss bbb'>
    <div></div>
    <a href='#'>click</a>
</div>

CSS

body {
    margin: 50px;
}

.sss {
    display: inline-block;        
    padding: 10px;
    margin: 10px 0;                
    background: #eee;
}

.sss > div {
    width: 100px;
    display: inline-block;
}

JavaScript

$(function() {
    $('#box').hide();
    
    function select() {
        hhh = $('#box').html();
        $('body').on('click', '.dropdown ul a', function(e) {
            var aaa = $(this).text();
            $(this).closest('.dropdown').children('a').html(aaa + '<b class="caret"></b>');

        });
        return hhh
            
    }


    $('.sss a').click(function(e) {    
        e.stopPropagation();                    
        var ccc = $(e.target).closest('.sss').attr('class');
        $(this).closest('.sss').children('div').html(select());
        
        $('.sss').each(function() {    
            if (!$(this).hasClass(ccc)) {
                $(this).closest('.sss').children('div').empty();
            }   
        });

    });
});