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(){}

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

我在这里找到了解决方案：Is there a function to deselect all text using JavaScript?

Answer 2

请允许我先解释一下为什么会这样。

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

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

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

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