How to close a Primer.css dropdown when click inside?-CodePudding

Primer.css documentation indicates how to show the menu but not how to hide it when clicking inside options.

https://primer.style/css/components/dropdown

  <details class="dropdown details-reset details-overlay d-inline-block">
    <summary class="btn" aria-haspopup="true">
      Dropdown
      <div class="dropdown-caret"></div>
    </summary>

    <ul class="dropdown-menu dropdown-menu-se">
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
      <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
    </ul>
  </details>

CodePudding user response：

You can get it for all document dropdowns easily removing the "open" attribute of "dropdown" class when the "dropdown-menu" elements are clicked.

This is a quickly JQuery code:

  $('.dropdown-menu').click(function() {
    $('.dropdown').removeAttr("open");
  });