JSFiddle - React, Tailwind, and code Playground

by Brunno Romero

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Regular link</a></li>
  <li role="presentation" class="dropdown open opened"> <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </a>
    <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
      <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>
  </li>
  <li role="presentation" class="dropdown opened"> <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
    <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
      <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>
  </li>
  <li role="presentation" class="dropdown opened"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
    <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6">
      <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>
   ...

CSS

html,
body {
  height: 100%;
}

JavaScript

$(function() {

  $('.dropdown.opened')
    .on({
      "shown.bs.dropdown": function() {
        this.closable = ($('.dropdown.open').length > 1) ? true : false
      },
      "click": function() {
        this.closable = true;
        $('.dropdown.opened').removeClass('open');

      },
      "hide.bs.dropdown": function() {
        return this.closable;
      }
    })

});