JS 更改汉堡包和显示菜单 - Javascript

简介

本文将介绍如何使用 JavaScript 来更改汉堡包图标和实现菜单的显示与隐藏。通过动态操作 DOM，您可以使用 JavaScript 在网页上实现交互性的功能。

更改汉堡包图标

<!-- HTML 结构 -->
<div id="mobile-menu">
  <div class="hamburger"></div>
</div>

/* CSS 样式 */
.hamburger {
  width: 30px;
  height: 3px;
  background-color: #333;
  margin-bottom: 6px;
}

/* 根据不同状态添加样式，例如打开和关闭菜单 */
.hamburger.open {
  background-color: #fff;
}

.hamburger.close {
  background-color: #333;
}

// JavaScript 代码
const hamburger = document.querySelector('.hamburger');
const mobileMenu = document.querySelector('#mobile-menu');

hamburger.addEventListener('click', function() {
  hamburger.classList.toggle('open');
});

通过以上代码，点击汉堡包图标时，将会切换汉堡包图标的样式，从而实现汉堡包图标的动态变换。

显示菜单

<!-- HTML 结构 -->
<div id="mobile-menu">
  <div class="hamburger"></div>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

/* CSS 样式 */
.menu {
  display: none;
}

.menu.active {
  display: block;
}

// JavaScript 代码
const hamburger = document.querySelector('.hamburger');
const mobileMenu = document.querySelector('#mobile-menu');
const menuItems = mobileMenu.querySelector('.menu');

hamburger.addEventListener('click', function() {
  hamburger.classList.toggle('open');
  menuItems.classList.toggle('active');
});

通过以上代码，点击汉堡包图标时，将会显示或隐藏菜单，从而实现菜单的交互性。

以上就是使用 JavaScript 来更改汉堡包图标和实现菜单的显示与隐藏的方法。通过动态操作 DOM，可以轻松达到网页交互的效果。希望这个介绍对您有所帮助！