如何改善我的JavaScript？包括codepen

Question

我在我的網站上使用此筆在移動視圖中的菜單按鈕： http : //codepen.io/anon/pen/LNNaYp

有時，當單擊垃圾郵件時，該按鈕會斷開。 關閉菜單時，將顯示“ X”狀態。

無論如何，我想知道如何改善我的JavaScript，因為我知道我可以使用jQuery來做到這一點，我已經嘗試過但失敗了。

的HTML

<body>
  <div class="showcase"><button type="button" role="button" aria-label="Toggle Navigation" id="buttonOne" class="lines-button x2">
<span class="lines"></span>
</button>
  </div>
</body>

的CSS

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;
}

JS

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;
    }
  }
});

Answer 1

在JSFiddle中查看

使用以下jQuery代碼

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

如何改善我的JavaScript？包括codepen

問題描述

1 個解決方案

解決方案1
0 已采納 2016-03-11 15:51:59

如何改善我的JavaScript？ 包括codepen

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-11 15:51:59

如何改善我的JavaScript？包括codepen

解決方案1
0 已采納 2016-03-11 15:51:59