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(); 作為點擊事件偵聽器中的第一件事。