javascript - 单击 javascript 函数时的代码不起作用？

Question

我是 javascript 的初学者，这就是为什么我无法理解我的代码有什么问题。

我只想在单击时将类 .open 添加到我的 maindiv 中。我希望我的 div 从左侧打开。

function myfunction() {
  $(this).addClass('open');
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>

Answer 1

您对此有疑问。只需尝试在 jQuery 中通过 ID 访问您的 div 即可。如果您想在下次单击时切换它，您可能还需要将 .addClass 更改为 toggleClass。

function myfunction() {
  $("#maindiv").addClass('open');
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px !important;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>