Question

我正在尝试创建一个用于隐藏/显示div的按钮，此代码在我的浏览器中可以正常运行，但是如果我将其上传到本地主机，则会造成混乱（我使用XAMPP）

var dropdown = document.getElementById("dropdown");

function Mostrar() {
  dropdown.style.display = "flex";
}

function Ocultar() {
  dropdown.style.display = "none";
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Menu Responsive</title>
</head>

<body>

  <input type="button" value="Hide text" onclick="Ocultar()">
  <input type="button" value="Show text" onclick="Mostrar()">
  <ul id="dropdown">
    <li>INICIO</li>
    <li>BLOGS</li>
    <li>CURSOS</li>
    <li>CONTACTO</li>
  </ul>
  <script type="text/javascript" src="code.js"></script>
</body>

</html>

Answer 1

如下更新功能

function Mostrar() {
  // dropdown.style.display = "flex"; // Change this to "block"
  dropdown.style.display = "block";
}

Answer 2

可能是由于浏览器问题。将您的Monstrar函数更改为此

function Mostrar() {
   dropdown.style.display = "inline-flex";
}

为什么JavaScript无法在localhost上运行但在我的机器上可以正常运行？

2 个答案: