Question

＆＃13;

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)";
    }
  }
}

＆＃13;

<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>

＆＃13;

问题是dropdownText div只会在arrowRight范围内再次点击后显示。我已经将其视为一个常见问题，但仍未能找到解决方案。任何帮助，将不胜感激。

Answer 1

在另一个bind事件处理程序中，您不需要click click个事件处理程序。您必须使用单个click事件处理程序。

show/hide功能属于第二个click事件处理程序，在binded之后，span DOM元素为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>

Answer 2

只需添加到批准的答案即可。

检查showElement.style.display == ''。
此外，如果您使用display = 'none'作为默认设置，则可以在首次单击时切换为flex。

示例：

..
if (showElement.style.display == 'none' || showElement.style.display == '') {
..

如果文字样式为display = 'none'。

Answer 3

您希望更早地分配事件处理程序：

$if (result = $database->query($sql)) {

并删除 onclick ='toggleDivFunction（）'，然后将其变为必要的老式。

您的代码在触发事件时指定侦听器（toggleDivFunction）。要触发侦听器（arrowElement.onclick），您需要使另一个事件执行第二次单击。

Answer 4

删除arrowElement.onclick = function() {}

<强>为什么吗

您已使用onclick=toggleDivFunction() .so在arrowRight中应用该功能首先执行toggleDivFunction()然后执行Dom arrowElement.onclick。使用任何一个onclick函数，而不是两者

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函数仅在第二次单击时起作用

4 个答案: