单击内部时如何关闭 Primer.css 下拉菜单？

Posted 2023-02-22

【中文标题】单击内部时如何关闭 Primer.css 下拉菜单？

【英文标题】：How to close a Primer.css dropdown when click inside?

【发布时间】：2021-12-05 09:28:37

【问题描述】：

Primer.css 文档说明了如何显示菜单，但没有说明单击内部选项时如何隐藏它。

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>

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

当点击“dropdown-menu”元素时，您可以轻松地删除“dropdown”类的“open”属性来获取所有文档下拉菜单。

这是一个快速的JQuery代码：

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