JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<button class="btn btn-secondary trigger_button">Trigger dropdown</button><br><br>

<div class="dropdown" id="dd_menu" data-auto-close="outside">
  <button class="btn btn-secondary dropdown-toggle" type="button" 
  data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu" onclick="event.stopPropagation()">
    <div class="dropdown-item">
      item1
    </div>
    <div class="dropdown-item">
      item2
    </div>
    <div class="dropdown-item">
    
    
      <div class="dropdown2">
        <button class="btn btn-info dropdown-toggle" type="button" 
          data-toggle="dropdown2">
            Dropdown 2
        </button>
        <div class="dropdown-menu">
          <div class="dropdown-item">
            item1
          </div>
          <div class="dropdown-item">
            item2
          </div>
          <div class="dropdown-item">
            item3
          </div>
        </div>
      </div>
      
      
    </div>
  </div>
</div>

JavaScript

$('.trigger_button').click(function(e){
  e.stopPropagation();
  $('.dropdown-toggle').dropdown('toggle');
});