变换函数和光标：指针不起作用

Question

我试图做到这一点，以便当用户单击三角形/它旁边的文本时，三角形会转动并在其下方显示一个 PHP 变量。但是，当我这样做时，它似乎不起作用，并且光标指针甚至没有出现。任何帮助，将不胜感激。

谢谢，代码如下

function triangleChange1() {

    var x = document.getElementById("triangle1")

    

    var y = document.getElementById("bID")

    

  if (y.style.display === "none") {

    x.style.transform =  "rotate(90deg)";

    y.style.display = "block";  

  } 

  else {

    x.style.transform =  "rotate(-90deg)";

    y.style.display = "none";

  }

}

.triangle1/*, .triangle2, .triangle3, .triangle4, .triangle5*/{ 

    width: 0;

    height: 0;

    border-top: 6px solid transparent;

    border-left: 14px solid #555;

    border-bottom: 6px solid transparent;

    margin-left: -25px;

    cursor: pointer;

    transition: 0.5s;

}

<div class="triangle1" id="triangle1" onclick="triangleChange1()"></div> <div class = "balance" onclick="triangleChange1()"> Student Card Balance </div><br>

<div class = "bID" id="bID"> $<?php echo $Balance;?> </div><br>

Answer 1

我没有看到三角形，但你必须给出尺寸属性才能div看到，我猜你错过了。function triangleChange1() {&nbsp; var x = document.getElementById("triangle1")&nbsp; var y = document.getElementById("bID")&nbsp; if (y.style.display === "none") {&nbsp; &nbsp; x.style.transform = "rotate(90deg)";&nbsp; &nbsp; y.style.display = "block";&nbsp; } else {&nbsp; &nbsp; x.style.transform = "rotate(-90deg)";&nbsp; &nbsp; y.style.display = "none";&nbsp; }}.triangle1/*, .triangle2, .triangle3, .triangle4, .triangle5*/{&nbsp; width: 30px;&nbsp; height: 30px;&nbsp; border-top: 6px solid transparent;&nbsp; border-left: 14px solid #555;&nbsp; border-bottom: 6px solid transparent;&nbsp; margin-left: 25px;&nbsp; cursor: pointer;&nbsp; transition: 0.5s;&nbsp; border: 1px solid red;&nbsp; background: teal;}<div class="triangle1" id="triangle1" onclick="triangleChange1()"></div><div class="balance" onclick="triangleChange1()"> Student Card Balance </div><br><div class="bID" id="bID"> $&nbsp; <?php echo $Balance;?> </div><br>