Question

所以我正在建立一个网站，我有几个div，当用户点击特定按钮或导航项时，应该从右，左或顶部滑动。但是，这些都不起作用。当我点击应该让它们滑动的按钮时，没有任何div会滑过。我正在使用纯JavaScript来执行这些操作。到目前为止，我已经尝试了几个动作。首先，我认为这是因为我没有window.onload，但在添加之后，没有任何改变。然后我可能链接仍然是默认操作，所以我试图添加e.preventDefault希望是问题，它也没有用。然后我发现一些奇怪的东西让我觉得可能是我的电脑没有正确解释javascript（奇怪的想法，我知道。但我只是在考虑任何事情，因为我用完了解决方案）。但实际上，事实证明我的计算机或编辑器没有在javascript中读取“文档”或窗口。它说它们都没有定义，这很奇怪，因为我已经在正文的末尾正确链接了javascript文件。所以我决定在JSFiddle上运行它来检查它是否真的只是我的电脑。但是，即使在JSFiddle中，当我单击按钮使它们滑动时，div仍然不会滑动。

我没有想法。由于我正在做的项目很大，我提取了不滑动的div的部分以使事情变得更容易。你们看到的div，当我们点击同一个div时，应该从左边滑动。

这是html代码：

<!DOCTYPE>
<html>
  <head>
    <title>Emanuel Inacio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="home-page">
      <div id="nav-bar"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

这是css代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condesed', 'San-serif';
}

#nav-bar {
  width: 50%;
  height: 100vh;
  background-color: #000000;
  transform: translateX(-50%);
  transition: transform 0.5s;
}

.active {
  transform: translateX(50%);
}

最后，这是javascript部分：

var nav = document.getElementById("nav-bar");

window.onload = function () {
  nav.addEventListener("click", function () {
    nav.classList.toggle("active");
  });
}

其他每个不起作用的div都具有与此相同的代码库。因此我决定只发布这个div。提前谢谢！

Answer 1

这是specificity问题，ID比类更具体，因此您的风格永远不会被应用。您需要像这样调整CSS：

＆＃13;

var nav = document.getElementById("nav-bar");

window.onload = function() {
  nav.addEventListener("click", function() {
    nav.classList.toggle("active");
  });
}

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Condesed', 'San-serif';
}

#nav-bar {
  width: 50%;
  height: 100vh;
  background-color: #000000;
  transform: translateX(-50%);
  transition: transform 0.5s;
}

#nav-bar.active {
  transform: translateX(50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="home-page">
  <div id="nav-bar"></div>
</div>

＆＃13;

动画（可能是切换类）不起作用

1 个答案: