当使用 popper.js 打开另一个弹出窗口时，在 JS 中关闭弹出窗口

Question

我有一些基本的 HTML 并加载 popper.js。 我有大约 3 个弹出窗口，但是当我单击打开另一个时它们没有关闭。

我使用 tailwind 作为 css 和 vanilla JS。我不想使用 jQuery 来让它工作。它还显示了一些关于被弃用的事件的错误，但不知道如何修复它。

请帮忙！

这是我的笔：https://codepen.io/RobineSavert/pen/xxLMqpX

这是我的代码：

function openPopover(event, tooltipID, position) {
  let element = event.target;
  while (element.nodeName !== "BUTTON") {
    element = element.parentNode;
  }
  var popper = Popper.createPopper(
    element,
    document.getElementById(tooltipID), {
      placement: position,
    }
  );
  document.getElementById(tooltipID).classList.toggle("hidden");
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
  <section class="bg-gradient-to-b from-night to-babyblue w-full h-95vh justify-center">
    <div class="flex flex-1 pr-2 pt-2">

<button onclick="openPopover(event,'popover-cv-bottom', 'bottom')" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12" type="button">
        click
      </button>
      <button onclick="openPopover(event,'popover-email-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
        click
      </button>
      <button onclick="openPopover(event,'popover-save-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
        click       </button>
      <div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-cv-bottom">
        <div>
          <div
            class="text-gray-700 opacity-75 font-semibold p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover 1 - title
          </div>
          <div class="text-gray-700 p-3">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.
          </div>
        </div>
      </div>
      <div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-email-bottom">
        <div>
          <div
            class="
        text-gray-700
        opacity-75
        font-semibold
        p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover 2 - title
          </div>
          <div class="text-gray-700 p-3">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.
          </div>
        </div>
      </div>
      <div class="hidden bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg" id="popover-save-bottom">
        <div>
          <div
            class="
        text-gray-700
        opacity-75
        font-semibold
        p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover 3 - title
          </div>
          <div class="text-gray-700 p-3">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe,
            non.
          </div>
        </div>

      </div>
    </div>
</section>

Answer 1

你可以试试这个：

allPoppers = [];

function openPopover(event, tooltipID, position)
{
  var el = document.getElementById(tooltipID);
  var state = el.style.visibility;
  
  // Close all popovers
  hideElements(allPoppers);

  let element = event.target;
  while (element.nodeName !== "BUTTON") {
    element = element.parentNode;
  }
  
  Popper.createPopper(
    element,
    el, {
      placement: position,
    }
  );

  allPoppers.push(tooltipID);
  toggle(el, state);
}

function toggle(el, state)
{
  if (state == "hidden") {
      el.style.visibility = "visible";
  } else if (state == "visible") {
      el.style.visibility = "hidden";
  } else {
      el.style.visibility = "visible";
  }
}

function hideElements(elements)
{
  var length = elements.length;

  if (length > 0) {
    for (var i = 0; i < length; i++) {
      document.getElementById(elements[i]).style.visibility = "hidden";
    }
  } 
}

.popover {  
    visibility: hidden;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
  <section class="bg-gradient-to-b from-night to-babyblue w-full h-95vh justify-center">
    <div class="flex flex-1 pr-2 pt-2">

<button onclick="openPopover(event,'popover-cv-bottom', 'bottom')" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12" type="button">
        click
      </button>
      <button onclick="openPopover(event,'popover-email-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
        click
      </button>
      <button onclick="openPopover(event,'popover-save-bottom', 'bottom')" type="button" class="mr-4 bg-red-400 flex h-12 justify-center p-3 rounded-full text-center text-white w-12">
        click       </button>
      <div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-cv-bottom">
        <div>
          <div
            class="text-gray-700 opacity-75 font-semibold p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover A
          </div>
          <div class="text-gray-700 p-3">
            A
          </div>
        </div>
      </div>
      <div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-email-bottom">
        <div>
          <div
            class="
        text-gray-700
        opacity-75
        font-semibold
        p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover B
          </div>
          <div class="text-gray-700 p-3">
            B
          </div>
        </div>
      </div>
      <div class="bg-white border mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg popover" id="popover-save-bottom">
        <div>
          <div
            class="
        text-gray-700
        opacity-75
        font-semibold
        p-3
        mb-0
        border-b border-solid border-gray-100
        uppercase
        rounded-t-lg
      "
          >
            Popover C
          </div>
          <div class="text-gray-700 p-3">
            C
          </div>
        </div>
      </div>
    </div>
</section>