如何改进我的javascript？代码笔包括在内

我在我的网站上使用此代码笔在移动视图中创建菜单按钮：

有时，当垃圾邮件单击按钮时，按钮会断开。当菜单关闭时，会出现“X”状态

无论如何，我想知道如何改进我的javascript，因为我知道我可以使用jQuery来完成，我已经尝试过了，但失败了

HTML

JS

使用以下jQuery代码

$(document).ready(function() {
  $("button").click(function() {
    $(this).toggleClass("close");
  });
});

---

你想得到什么？代码笔在我的位置很好不能复制任何东西breaking@Gho5t您应该引用源代码，或者不进行猜测，这是为了改进工作代码；StackOverflow是为了改进坏代码。我投票结束这个问题，因为它不是关于不起作用的代码。这对他们来说更合适，但首先要检查他们的指导方针。

body {
  background-color: #5DC1AF;
}

.showcase {
  margin-top: 40px;
  text-align: center;
}

.lines-button {
  padding: 2rem 1rem;
  transition: .3s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.57143rem;
}

/*.lines-button:hover {
  opacity: 1;
}*/

.lines-button:active {
  transition: 0;
}

.lines {
  display: inline-block;
  width: 4rem;
  height: 0.37143rem;
  background: #ecf0f1;
  border-radius: 0.28571rem;
  transition: 0.3s;
  position: relative;
}

.lines:before,
.lines:after {
  display: inline-block;
  width: 4rem;
  height: 0.37143rem;
  background: #ecf0f1;
  border-radius: 0.28571rem;
  transition: 0.3s;
  position: absolute;
  left: 0;
  content: '';
  -webkit-transform-origin: 0.28571rem center;
  transform-origin: 0.28571rem center;
}

.lines:before {
  top: 1rem;
}

.lines:after {
  top: -1rem;
}

/*.lines-button:hover .lines:before {
  top: 1.14286rem;
}

.lines-button:hover .lines:after {
  top: -1.14286rem;
}*/

.lines-button.close {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
  transform: scale3d(0.8, 0.8, 0.8);
}

button {
  display: inline-block;
  margin: 0 1em;
  border: none;
  background: none;
}

button span {
  display: block;
}

.lines-button.x2 .lines {
  transition: background 0.3s 0.5s ease;
}

.lines-button.x2 .lines:before,
.lines-button.x2 .lines:after {
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
  transition: top 0.3s 0.6s ease, transform 0.3s ease;
}

.lines-button.x2.close .lines {
  transition: background 0.3s 0s ease;
  background: transparent;
}

.lines-button.x2.close .lines:before,
.lines-button.x2.close .lines:after {
  transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
  transition: top 0.3s ease, transform 0.3s 0.5s ease;
  top: 0;
  width: 4rem;
}

.lines-button.x2.close .lines:before {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
}

.lines-button.x2.close .lines:after {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
}

button:focus {
  outline: none !important;
}

var anchor = document.querySelectorAll('button');

[].forEach.call(anchor, function(anchor) {
  var open = false;
  anchor.onclick = function(event) {
    event.preventDefault();
    if (!open) {
      this.classList.add('close');
      open = true;
    } else {
      this.classList.remove('close');
      open = false;
    }
  }
});

$(document).ready(function() {
  $("button").click(function() {
    $(this).toggleClass("close");
  });
});