Onclick JavaScript函数仅在第二次单击时有效 [英] Onclick javascript function working only on second click

问题描述

function toggleDivFunction() {
  var arrowElement = document.getElementById("arrowRight");
  var showElement = document.getElementById("dropdownText");
  arrowElement.onclick = function() {
    if (showElement.style.display == 'none') {
      showElement.style.display = 'block';
      document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
    } else {
      showElement.style.display = 'none';
      document.getElementById("arrowRight").style = "transform: rotate(0deg)";
    }
  }
}

<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText"><p>TEXT TO BE SHOWN</p></div>

问题是 dropdownText div仅在第二次单击 arrowRight 跨度后才显示.我已将其视为常见问题，但仍未找到解决方案.任何帮助，将不胜感激.

The problem is that the dropdownText div only shows up after a second click on the arrowRight span. I have seen it as a common problem, but still failed in finding a solution. Any help would be appreciated.

推荐答案

您无需将 click 事件处理程序 bind 绑定到另一个 click 事件处理程序.您必须使用单个 click 事件处理程序.

You do not need to bind a click event handler inside another click event handler. You have to use a single click event handler.

显示/隐藏功能属于第二个 click 事件处理程序，并且已 bind 绑定到您的 span DOM第一次点击之后的元素.

The show/hide functionality belongs to second click event handler and this is binded to your span DOM element after first click.

function toggleDivFunction () {
   var arrowElement = document.getElementById ("arrowRight");
   var showElement = document.getElementById ("dropdownText");
   if(showElement.style.display == 'none')
   {
      showElement.style.display = 'block'; 
      document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
   }
   else
   {
      showElement.style.display = 'none';
      document.getElementById("arrowRight").style = "transform: rotate(0deg)";
   }
}

<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText">
<p>TEXT TO BE SHOWN</p></div>

这篇关于Onclick JavaScript函数仅在第二次单击时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！