<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
  </ul>
</div>
<a href="#" class="btn btn-default">Normal Button</a>
<a href="#" data-remote class="btn btn-default">Remote Link</a>

<p>When the dropdown menu is open, clicking anywhere else in this frame <em>should</em> close it. Unfortunately, clicking on "Remote Link" (which contains the <code>data-remote</code> attribute) doesn't close the dropdown because jquery-ujs is stopping event progation.</p>
  
body {
  padding: 2em;
}

.nav {
  border: 1px solid #f8f8f8;
  border-radius: 4px;
}

p {
  margin: 1em 0;
}

External CSS

  1. https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://rawgit.com/rails/jquery-ujs/861ea20897e3faa02d80008e2c6e537aa35011bf/src/rails.js
  3. https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js