带有HTML、CSS和JavaScript的汉堡菜单无法正常工作

xjreopfe 于 2023-02-14 发布在 Java

关注(0)|答案(1)|浏览(156)

当我点击汉堡菜单时，我看到了一个文本光标，如下图所示：

下面是汉堡菜单的HTML：

<div class="hamburger-menu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<style>
  .bar1,
  .bar2,
  .bar3 {
    width: 25px;
    height: 2px;
    background-color: var(--clr-black);
    margin: 5px 0;
    transition: 0.4s;
  }

  .animation.bar1 {
    transform: translate(0, 7.1px) rotate(-45deg);
  }

  .animation.bar2 {
    opacity: 0;
  }

  .animation.bar3 {
    transform: translate(0, -7.1px) rotate(45deg);
  }
</style>

<script>
 document.querySelector('.bar1').classList.toggle('animation')
 document.querySelector('.bar2').classList.toggle('animation')
document.querySelector('.bar3').classList.toggle('animation')
</script>`

我试了上面的代码。汉堡菜单是工作的。但是当我点击它的时候，一个文本光标出现在（底部）汉堡菜单上。
我想删除该光标。

css

来源：https://stackoverflow.com/questions/75417986/hamburger-menu-with-html-css-and-javascript-not-working-properly

1条答案

按热度按时间

798qvoo81#

你可以像下面这样做。我在这条路上稍微简化了你的代码。另外，为了便于访问，我建议你用button代替div。

const hamburger = document.querySelector(".hamburger-menu");
hamburger.addEventListener("click", (e) => {
  hamburger.classList.toggle("animation");
});

.bar {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: 5px 0;
  transition: 0.4s;
}

.animation .bar1 {
  transform: translate(0, 7.1px) rotate(-45deg);
}

.animation .bar2 {
  opacity: 0;
}

.animation .bar3 {
  transform: translate(0, -7.1px) rotate(45deg);
}

<div class="hamburger-menu">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
</div>

赞(0）回复(0）举报 2023-02-14

我来回答

带有HTML、CSS和JavaScript的汉堡菜单无法正常工作

1条答案

相关问题

热门标签

最新问答