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.2s才能变为0。

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

要解决此问题，请调用window.getSelection（）。removeAllRanges（）;作为点击事件监听器中的第一件事。

展开时，jQuery手风琴会自动选择所有包含文本的内容

2 个答案: