转换功能和光标：指针不起作用

Posted 2021-03-19

我正在尝试制作，因此当用户单击三角形/旁边的文本时，三角形会旋转并在其下显示一个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>

答案

我看不到三角形，但是您必须提供size属性才能看到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>

以上是关于转换功能和光标：指针不起作用的主要内容，如果未能解决你的问题，请参考以下文章

光标：指针；在 svg 元素上不起作用

共享元素转换在父片段和子片段之间不起作用（嵌套片段）

共享项目转换在背面的片段中不起作用

共享元素片段转换不起作用

共享转换片段到片段不起作用

当指针指向数组时，为啥 operator(*) 的值不起作用？