使用Reactjs不显示汉堡图标

Question

汉堡图标没有在移动设备上显示，但它实际上可以工作，但是当我单击图标时，它没有在移动设备上显示。

下面是我的 HTML：

.hamburger {
  cursor: pointer;
  height: 16px;
  margin: 10px 0 -1px 10px;
  position: relative;
  top: 4px;
  transform: scale(1.1);
  width: 20px;
  z-index: 100
}

@media (min-width:1280px) {
  .hamburger {
    display: none;
    margin: 18px 30px 0 0
  }
  .hamburger.active {
    display: block
  }
}

.hamburger.active span {
  background: #fff
}

.hamburger.active span:first-child {
  left: 50%;
  top: 6px;
  width: 0
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg)
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg)
}

.hamburger.active span:nth-child(4) {
  left: 50%;
  top: 6px;
  width: 0
}

.hamburger span {
  background: #1a1a1a;
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: rotate(0deg);
  transition: transform .25s ease-in-out;
  width: 100%
}

.hamburger span:first-child {
  top: 0
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
  top: 6px
}

.hamburger span:nth-child(4) {
  top: 12px
}

<button class="showMobileMenu inline-block bg-ubx-red text-xxl py-4 px-0 cursor-pointer outline-none focus-outline-none z-50 relative outline-none focus-outline-none text-white w-10 h-8 mobiMenuToggleIsActive xl-hidden" @click="${this._handleShowMenuClick}">
            <div className="hamburger hamburger-btn">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </button>

如果有人可以看看上面我实际上做错了什么？ 任何帮助将不胜感激！

Answer 1

请尝试使用此方法

---

 <button class="showMobileMenu inline-block bg-ubx-red text-xxl py-4 px-0 
  cursor-pointer outline-none focus-outline-none z-50 relative outline- 
  none focus-outline-none 

text-white // 这个 tailwind 类有问题，白色图标与白色背景混合 w-10 h-8 mobiMenuToggleIsActive xl- 隐藏" @click="${this._handleShowMenuClick}"> 关闭

---

    .hamburger {
  cursor: pointer;
  height: 16px;
  margin: 10px 0 -1px 10px;
  position: relative;
  top: 4px;
  transform: scale(1.1);
  width: 20px;
  z-index: 100;
  display: none; /* Hide by default */
}

@media (max-width: 1280px) {
  .hamburger {
    display: none;
    margin: 18px 30px 0 0;
  }
  .hamburger.active {
    display: block;
  }
}

.hamburger.active span:first-child {
  left: 50%;
  top: 6px;
  width: 0;
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
  left: 50%;
  top: 6px;
  width: 0;
}

.hamburger span {
  background: #1a1a1a;
  border-radius: 2px;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  transform: rotate(0deg);
  transition: transform 0.25s ease-in-out;
  width: 100%;
}

.hamburger span:first-child {
  top: 0;
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
  top: 6px;
}

.hamburger span:nth-child(4) {
  top: 12px;
}

---

试试这个，这一定对你有用。