如何使用jQuery打开Shopify Polaris CSS框架的Popover？

首先确保你的HTML结构符合Polaris Popover的规范，以下是标准示例：

<!-- 触发按钮 -->
<button class="Polaris-Button" type="button" id="popover-trigger" aria-controls="popover-container" aria-expanded="false">
  打开Popover
</button>

<!-- Popover容器 -->
<div class="Polaris-Popover" id="popover-container" role="dialog" aria-modal="true" hidden>
  <div class="Polaris-Popover__Content">
    <div class="Polaris-Popover__Header">
      <h2 class="Polaris-Heading">Popover标题</h2>
      <button class="Polaris-Button Polaris-Button--plain Polaris-Popover__Close" type="button" id="popover-close">
        <span class="Polaris-Button__Content">
          <svg class="Polaris-Icon" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
            <path d="M11.414 10l3.293-3.293a1 1 0 10-1.414-1.414L10 8.586 6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10z"></path>
          </svg>
        </span>
      </button>
    </div>
    <div class="Polaris-Popover__Body">
      <p>这是Popover的内容区域</p>
    </div>
  </div>
</div>

接下来是对应的jQuery实现代码，包含触发切换、关闭按钮和外部点击关闭逻辑：

$(document).ready(function() {
  const $trigger = $('#popover-trigger');
  const $popover = $('#popover-container');
  const $closeBtn = $('#popover-close');

  // 触发按钮点击切换Popover状态
  $trigger.on('click', function() {
    const isExpanded = $(this).attr('aria-expanded') === 'true';
    // 更新无障碍属性
    $(this).attr('aria-expanded', !isExpanded);
    // 切换hidden属性和Polaris的显示类
    $popover.prop('hidden', isExpanded).toggleClass('Polaris-Popover--open', !isExpanded);
  });

  // 关闭按钮点击关闭Popover
  $closeBtn.on('click', function() {
    $trigger.attr('aria-expanded', 'false');
    $popover.prop('hidden', true).removeClass('Polaris-Popover--open');
  });

  // 点击Popover外部关闭
  $(document).on('click', function(e) {
    const isClickInsidePopover = $popover.is(e.target) || $popover.has(e.target).length > 0;
    const isClickOnTrigger = $trigger.is(e.target);
    if (!isClickInsidePopover && !isClickOnTrigger) {
      $trigger.attr('aria-expanded', 'false');
      $popover.prop('hidden', true).removeClass('Polaris-Popover--open');
    }
  });
});

关键注意点： #

• Polaris Popover默认通过hidden属性控制基础显示/隐藏，部分版本需要配合Polaris-Popover--open类触发动画和完整样式
• 必须同步更新触发按钮的aria-expanded属性，保证无障碍访问性
• 外部点击关闭是常规交互，避免Popover一直停留在页面上

内容的提问来源于stack exchange，提问作者Aleks Per