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

View in JSFiddle

使用以下jQuery代码

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

我怎样才能改进我的javascript？包括codepen

1 个答案: