無法使用javascript隱藏和顯示串列中的元素

我正在嘗試制作一個可折疊的 li，所以我想在單擊 li(index) 時顯示一個段落，我搜索了一段時間，發現您可以使用 onClick 函式定位 li，我成功隱藏了該段落，但是在單擊后再次在 li(index) 上沒有顯示的段落有沒有人可以幫助我？

function myfunction(li) {
  var TextInsideLi = li.getElementsByTagName('p')[0];

  if (TextInsideLi.style.display = "block") {
    TextInsideLi.style.display = "none";
  } else {
    TextInsideLi.style.display = "block";
  }
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

uj5u.com熱心網友回復：

較早的答案僅適用于第二次點擊li，下面的答案適用于第一次點擊。

您在陳述句的前面進行了賦值if，您需要使用==或其他比較運算子而不是賦值運算子。

我還檢查顯示是否不是無而不是是否是塊，因為最初它既沒有塊也沒有塊。

function myfunction(li) {
  var TextInsideLi = li.getElementsByTagName('p')[0];
  
  console.log("click");

  if (TextInsideLi.style.display !== "none") {
    TextInsideLi.style.display = "none";
  } else {
    TextInsideLi.style.display = "block";
  }
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
      <i class="fas fa-plus"></i>
      <i class="fas fa-minus"></i>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

uj5u.com熱心網友回復：

您必須添加比較而不是賦值'='

if (TextInsideLi.style.display === "block")

uj5u.com熱心網友回復：

我拿了你的代碼，然后做了一個比較，如下所示：

if (TextInsideLi.style.display === "block") 帶有 3 個 '=' 符號。

它對我有用。

uj5u.com熱心網友回復：

您正在分配而不是比較：

if(TextInsideLi.style.display = "block")

必須是

if(TextInsideLi.style.display === "block")

此外，在第一次單擊時，您的p元素沒有任何行內樣式（ element.style僅檢查）。這就是為什么最初在其中一個答案中您必須單擊兩次。

我建議您改用現有的通用hiddenAPI。

除了避免行內樣式外，您還應該盡量避免行內事件偵聽器，例如onclick="...". 相反，使用addEventListener.

const questions = document.querySelectorAll('li.question');

for (const question of questions) {
  question.addEventListener('click', () => {
    const pElement = question.querySelector('p:last-child');
    pElement.hidden = !pElement.hidden; // toggles el.hidden
  });
}

<ul class="questions" id="myList">
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
  <li class="question" onclick="myfunction(this)">
    <div class="question-header">
      <a>What types of licenses are included?</a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </li>
</ul>

標籤：

上一篇：如何將.then()的一部分決議為其他函式

下一篇：Vue3：處理“visibilitychange”和“offline”等事件監聽器的正確方法是什么？