jQuery Accordion 在展开时自动选择所有包含文本

Question

我有以下Codepen ，显示了我创建的简单下拉列表。 人们会注意到，当单击向下箭头时，有时会选择所有包含文本。

如何阻止所有文本/内容在活动时自动选择，同时让用户选择手动选择文本？

$(document).ready(function() {
  //   Open first panel automatically
  $(".accordion_trigger")[0].nextElementSibling.classList.add("active");
  $(".accordion_trigger")[0].lastElementChild.classList.replace(
    "fa-chevron-down",
    "fa-chevron-up"
  );

  // Click event listener
  $(".accordion_trigger").on("click", function() {
    // Show panel on click
    this.nextElementSibling.classList.toggle("active");

    // update the font-awesome icon up/down
    const fa = this.lastElementChild.classList;
    fa.contains("fa-chevron-down")
      ? fa.replace("fa-chevron-down", "fa-chevron-up")
      : fa.replace("fa-chevron-up", "fa-chevron-down");

    // Remove all other chevron down icons
    const chevrons = $(".fa-chevron-up").filter(
      (index, item) => item != this.lastElementChild
    );
    for (var item of chevrons) {
      item.classList.replace("fa-chevron-up", "fa-chevron-down");
    }

    // Hide all other panels on click
    const others = $(".accordion_trigger").filter(
      (index, item) => item != this
    );
    for (var item of others) {
      item.nextElementSibling.classList.remove("active");
    }
  });
});

为了复制这一点，导航到页面，然后快速关闭并重新打开文本。 请注意，此问题不会在 Firefox 或 Edge 中发生。

<div class="accordion">
  <ul class="accordion_ul">
    <li class="accordion_trigger">
      <h5>Test Entry</h5>
      <i class="fas fa-chevron-down"></i>
    </li>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <li class="accordion_trigger">
      <h5>Test Entry</h5>
      <i class="fas fa-chevron-down"></i>
    </li>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </ul>
</div>

Answer 1

添加window.getSelection().removeAllRanges(); 到$(".accordion_trigger").on("click", function(){}

这将取消选择您在显示面板时选择的任何文本（这将是双击选择所有内容并触发打开面板的第二次单击）。

我在这里找到了解决方案： 是否有使用 JavaScript 取消选择所有文本的功能？

Answer 2

请允许我首先解释为什么会发生这种情况。

首先请注意面板绝对位于顶部。 然后注意可见性和不透明度，它们最初分别设置为hidden和0并分别切换为visible和1 ，这就是动画的完成方式。

想想最初的面板，它是visible和不透明的（不透明度 0）并且没有绝对位置。 当您向其中添加活动类时（单击 V 形），页面将绝对定位，到达顶部，不透明度需要 0.2 秒才能变为 0。

如果您查看不透明度和可见性的规范：具有不透明度值（甚至 0）会使元素难以处理，这就是为什么快速双击 V 形也意味着双击其中的文本。 这仅发生在某些浏览器上，因为其他浏览器（FF、IE 和 Edge）将忽略交互性，因为可见性设置为隐藏。 这就是为什么只有当光标放置得比顶部稍低时才会注意到它。 如果您将转换规则从transition: visibility 0s, opacity 0.2s linear;更改为transition: visibility 0s, opacity 0.2s linear; transition: visibility 1s, opacity 0.2s linear; .

要解决它，请调用 window.getSelection().removeAllRanges(); 作为点击事件侦听器中的第一件事。