Bulma Dropdown

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css">

    <div class="control moderate">
      <button class="button is-small" type="button">
        moderate
      </button>

      <div class="box dropdown">
        <ul>
          <li><a class="nav-item">edit</a></li>
          <li><a class="nav-item">delete</a></li>
          <li><a class="nav-item">block user</a></li>
        </ul>
      </div>
    </div>


    <div class="control moderate">
      <button class="button is-small" type="button">
        moderate
      </button>

      <div class="box dropdown">
        <ul>
          <li><a class="nav-item">edit</a></li>
          <li><a class="nav-item">delete</a></li>
          <li><a class="nav-item">block user</a></li>
        </ul>
      </div>
    </div>

CSS

.dropdown {
  box-shadow: 0 0 2px #777;
  display: none;
  left: 0;
  position: absolute;
  padding: 2px;
  z-index: 10;
}

.dropdown a {
  font-size: 12px;
  padding: 4px;
}

.dropdown.is-open {
  display: block;
}

JavaScript

$('.moderate .button').on('click', (event) => {
  $(event.target).siblings('.dropdown')
    .toggleClass('is-open');
});

$(document).click(function(e) {
  $('.moderate')
    .not($('.moderate').has($(e.target)))
    .children('.dropdown')
    .removeClass('is-open');
});