Question

汉堡菜单图标打开和关闭隐藏的侧边栏，同时我希望在侧边栏打开时将图标更改为 X。

按钮

import React, { Component } from "react";
import axios from "axios";
import "./Customers.css";

export default class Customers extends Component {
  state = {
    customers: [],
  };

  componentDidMount() {
    axios
      .get("http://localhost:5000/customers")
      .then((res) => {
        res.data.sort();
        console.log(res.data);
        this.setState({ customers: res.data });
      })
      .catch((err) => console.log(err));
  }

  render() {
    return (
      <div className="container-fluid main w-75 my-4 d-flex flex-column align-items-center">
        <div className="top p-4 d-flex justify-content-center">
          Our Customers
        </div>
        <div className="tables w-100">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th scope="col">Account No</th>
                <th scope="col">Name</th>
                <th scope="col">E-mail</th>
                <th scope="col">Balance</th>
              </tr>
            </thead>
            <tbody>
              {this.state.customers.map((customer) => (
                <tr>
                  <th scope="row">{customer.account_no}</th>
                  <td>{customer.name}</td>
                  <td>{customer.email}</td>
                  <td>{customer.balance}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

菜单脚本

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> </span>

可能犯了一个明显的错误，但我已经用谷歌搜索了很多次，但仍然无法弄清楚。

Answer 1

你不能像以前那样切换多个职业

你必须打两个电话

function toggleNav() {
  /*    var sidenav = document.getElementById("mySidenav"),
      main = document.getElementById("main");
      sidenav.style.width = sidenav.style.width === "250px" ? '0' : '250px';
      wrapper.style.marginLeft = wrapper.style.marginLeft === "250px" ? 'auto' :  '250px';*/
}

function myFunction(x) {
  x.classList.toggle("fa-bars");
  x.classList.toggle("fa-times");
}

i {
  height: 20px;
  width: 20px;
  background-color: red;
  display: block;
}

<span style="font-size:16px;cursor:pointer" onclick="toggleNav()"><i onclick="myFunction(this)" class="fas fa-bars"></i> The red square represent your icon</span>

单击时更改切换按钮？

1 个答案: