如何实现点击Primer.css下拉菜单内部选项时自动关闭菜单

问题说明 #

Primer.css官方文档仅介绍了下拉菜单的展示规则，未说明点击内部选项时隐藏菜单的实现方法。

基础组件参考代码 #

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

  <ul class="dropdown-menu dropdown-menu-se">
    <li><a class="dropdown-item" href="#url">菜单项1</a></li>
    <li><a class="dropdown-item" href="#url">菜单项2</a></li>
    <li><a class="dropdown-item" href="#url">菜单项3</a></li>
  </ul>
</details>

实现方法 #

该下拉菜单基于原生<details>标签实现，菜单展开时标签会自带open属性，隐藏菜单只需要移除该属性即可，以下是两种常用实现方案：

• 原生JavaScript实现
  给所有下拉菜单项绑定点击事件，触发时找到父级<details>标签移除open属性：

  // 页面加载完成后绑定事件
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.dropdown-item').forEach(item => {
      item.addEventListener('click', () => {
        const dropdown = item.closest('details.dropdown');
        dropdown && dropdown.removeAttribute('open');
      });
    });
  });
  

• jQuery实现
  如果项目已经引入jQuery，可以用更简洁的写法：

  $(document).on('click', '.dropdown-item', function() {
    $(this).closest('details.dropdown').removeAttr('open');
  });
  

内容的提问来源于stack exchange，提问作者Extrange planet