JSFiddle - React, Tailwind, and code Playground
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 class='dd'></div>
<a href='#'>click</a>
</div>
<div class='sss bbb'>
<div class='dd'></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();
hhh = $('#box').html();
function select(x,y) {
$('body').on('click', '.dropdown ul a', function(e) {
var text = $(this).text();
$(this).closest('.dropdown').children('a').html(text + '<b class="caret"></b>');
$(this).closest('.dd').attr('selection', text);
});
function modified(a,b) {
foo = $('#box').html();
foo = $(b).html(foo);
foo = foo.find('.dropdown-toggle').html(a + '<b class="caret"></b>');
}
if (x > '') {
return modified(x,y);
} else {
return hhh;
}
}
$('.sss a').click(function(e) {
e.stopPropagation();
et = $(e.target).closest('.sss').children('.dd').attr('selection');
ettt = $(e.target).closest('.sss').children('.dd');
$(this).closest('.sss').children('.dd').html(select(et, ettt));
var ccc = $(e.target).closest('.sss').attr('class');
$('.sss').each(function() {
if (!$(this).hasClass(ccc)) {
$(this).closest('.sss').children('.dd').empty();
}
});
});
});