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

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() {

  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: 30px;

  height: 30px;

  border-top: 6px solid transparent;

  border-left: 14px solid #555;

  border-bottom: 6px solid transparent;

  margin-left: 25px;

  cursor: pointer;

  transition: 0.5s;

  border: 1px solid red;

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

  <?php echo $Balance;?> </div><br>