必须单击两次才能在 JavaScript 中触发事件

Question

我在 JavaScript 中设置了一个切换事件，但是当页面加载时，我必须在该元素上单击两次才能触发。之后它只需单击一下即可正常响应，但只要我刷新页面，它就会再次发生。

这是它发生的地方：

这是网站，您可以自己清楚地看到行为： https://n-ii-ma.github.io/Portfolio-Website/

这是活动的JS代码：

/* Read More */
let readMore1 = document.getElementById('show-card-1');
let readMore2 = document.getElementById('show-card-2');
let readMore3 = document.getElementById('show-card-3');

/* Projects Description */
let desc1 = document.getElementById('details1');
let desc2 = document.getElementById('details2');
let desc3 = document.getElementById('details3');

/* Toggle Description */
readMore1.onclick = function() {
    if (desc1.style.display === 'none') {
        desc1.style.display = 'block';
        readMore1.style.color = 'DeepPink';
        readMore1.innerText = 'Read Less';
    }
    else {
        desc1.style.display = 'none';
        readMore1.style.color = '';
        readMore1.innerText = 'Read More';
    }
}

readMore2.onclick = function() {
    if (desc2.style.display === 'none') {
        desc2.style.display = 'block';
        readMore2.style.color = 'DeepPink';
        readMore2.innerText = 'Read Less';
    }
    else {
        desc2.style.display = 'none';
        readMore2.style.color = '';
        readMore2.innerText = 'Read More';
    }
}

readMore3.onclick = function() {
    if (desc3.style.display === 'none') {
        desc3.style.display = 'block';
        readMore3.style.color = 'DeepPink';
        readMore3.innerText = 'Read Less';
    }
    else {
        desc3.style.display = 'none';
        readMore3.style.color = '';
        readMore3.innerText = 'Read More';
    }
}

你知道我怎么解决这个问题吗？

Answer 1

你已经定义了 onClick 甚至如下：

   if (desc1.style.display === 'none') {
        desc1.style.display = 'block';
        readMore1.style.color = 'DeepPink';
        readMore1.innerText = 'Read Less';
    }
    else {
        desc1.style.display = 'none';
        readMore1.style.color = '';
        readMore1.innerText = 'Read More';
    }

第一次点击时 desc1.style.display 显示为空白。

所以它进入了 else 部分而不显示它。

您需要在第一次加载时将 style.display 添加为 none，或者在 if 中添加另一个条件以获得 desc1.style.display === ''，如下所示：

let readMore1 = document.getElementById('show-card-1');

let desc1 = document.getElementById('details1');

readMore1.onclick = function() {
  if (desc1.style.display === 'none' || desc1.style.display === '') {
    desc1.style.display = 'block';
    readMore1.style.color = 'DeepPink';
    readMore1.innerText = 'Read Less';
  } else {
    desc1.style.display = 'none';
    readMore1.style.color = '';
    readMore1.innerText = 'Read More';
  }
}

<div class="project-title" id="project1">
  <div class="title">
    <h3>Tea Cozy</h3>
    <p id="show-card-1">Read More</p>
  </div>
</div>

<div class="project-desc" id="details1" style="display: none;">
  <p>This was my first website that I published to GitHub Pages. It was quite challenging at the time, but it greatly helped me learn a lot to hone my skills.</p>
  <a href="https://n-ii-ma.github.io/Tea-Cozy/" class="address" target="_blank">Tea Cozy</a>
  <div class="tech">
    <i class="fab fa-html5 fa-2x" aria-hidden="true"></i>
    <i class="fab fa-css3-alt fa-2x" aria-hidden="true"></i>
    <i class="fab fa-git fa-2x" aria-hidden="true"></i>
    <i class="fab fa-github fa-2x" aria-hidden="true"></i>
  </div>
</div>

Answer 2

您已使用 CSS 将 desc 部分设置为 display: none，但 element.style.property 语法只能访问内联样式。

这意味着在第一次调用时，desc1.style.display 等于 ""，而不是 none。这将 display: none 属性添加到 else 块中的内联样式，代码从那里正常工作。

要同时测试 CSS 和内联样式，您应该使用 window.getComputedStyle:

if (getComputedStyle(desc1).display === "none") {
    desc1.style.display = 'block';
    readMore1.style.color = 'DeepPink';
    readMore1.innerText = 'Read Less';
}

Answer 3

element.style.display 仅提供非计算样式。因此它不会 return 您通过类分配的样式或 css 文件中的 ID。

要检查这一点，您可以使用 getComputedStyle()。

看这个例子：

const elm1 = document.getElementById('hello')
const elm2 = document.getElementById('bye')

console.log('non-computed# hello:', elm1.style.display)
console.log('computed #hello:', getComputedStyle(elm1).display)

console.log('non-computed #bye:', getComputedStyle(elm2).display)

#hello {
  display: none;
}

<h1 id="hello"></h1>
<h1 id="bye" style="display: none"></h1>

必须单击两次才能在 JavaScript 中触发事件

Have to click twice for event to fire in JavaScript

html

javascript

css

dom-events