JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle">
Dropdown
</button>
<ul class="dropdown-menu collapsed" aria-labelledby="dropdownMenu1" id="dropdown">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</body>
CSS
body {
}
.dropdown .dropdown-menu {
display: block;
-moz-transition: opacity 0.2s ease-out 0s, -moz-transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
-o-transition: opacity 0.2s ease-out 0s, -o-transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out, visibility 0s ease-out;
-webkit-transition-delay: 0s, 0s, 0.1s;
transition: opacity 0.2s ease-out 0s, transform 0.2s ease-out 0s, visibility 0s ease-out 0.1s;
}
.dropdown .dropdown-menu.collapsed {
opacity: 0;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
visibility: hidden !important;
}
.dropdown .dropdown-menu.expanded {
opacity: 1;
-moz-transform: translateY(12px);
-ms-transform: translateY(12px);
-webkit-transform: translateY(12px);
transform: translateY(12px);
visibility: visible !important;
}
JavaScript
$('.dropdown-toggle').click(function() {
$(this).siblings('.dropdown-menu').toggleClass('expanded');
});
$(document).click(function (e) {
var clicked = $(e.target);
var opened = $(".dropdown-menu").hasClass("expanded");
if (opened === true && !clicked.hasClass("dropdown-toggle")) {
$(".dropdown-toggle").click();
}
});