我试图改变'酒吧'图标在导航栏成'xmark'图标点击时.但我不想使用tripple或tripple，而这样做.我只想改变2图标（bar和xmark）在响应式视图中打开或关闭菜单时相互作用。为了解决这个问题，我可以使用CSS，BootStrap或JavaScript。正如我提到的，我还使用Vue.js框架。（另外，我从我以前的小项目中提取了一些代码片段。）Navbar in responsive view
以下是整个代码（包括HTML，CSS和JavaScript）：

<template>
    <nav class="navbar navbar-expand-lg navbar-light sticky-top set-nav">
        <div class="container">
            
            <nuxt-link to="/" class="brand">
                <img class="img-fluid desktop logo" height="auto" width="auto" src="~/assets/images/logo.png" alt="Logo"/>
                <img class="img-fluid mobile" height="120" width="120" src="~/assets/images/logo.png" alt=""/>
            </nuxt-link>

            <button
                class="navbar-toggler d-flex d-lg-none flex-column justify-content-around"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <i><fa :icon="['fas', 'bars']" class="icon toggle alt fa-3x burger-bars" /></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="nav ml-auto">
                    <li class="nav-item active">
                        <nuxt-link class="nav-link" :to="{ path: '/', hash: '' }" exact>Home</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :to="{ path: '/', hash: '' }" exact>Hire A Bike</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :to="{ path: '/', hash: '' }" exact>About</nuxt-link>
                    </li>
                    <li class="nav-item">
                        <nuxt-link class="nav-link" :to="{ path: '/', hash: '' }" exact>Contact</nuxt-link>
                    </li>
                </ul>
            </div>
            </div> 
            <div class="header">
                <div class="container">
                    <ul class="header-links">
                        <li class="header-link terms">
                            <fa :icon="['fas', 'hand-point-up']" class="terms-icon fa-2x" style="color:orange" />
                            <nuxt-link class="header-nuxt terms-link" :to="{ path: '/', hash: '' }" exact>Terms & Conditions</nuxt-link>
                        </li>
                        <li class="header-link phone-number">
                            <fa :icon="['fas', 'phone']" class="phone-icon fa-2x" style="color:orange" />
                            <nuxt-link class="header-nuxt phone-link" :to="{ path: '/', hash: '' }" exact>(+90) 533 505 50 50</nuxt-link>
                        </li>
                    </ul>
                </div>
                </div>
           
    </nav>
</template>

<script>

export default {
  data: {},

  name: "Navbar",
  data: () => ({
    windowSize: "mobile",
  }),
  beforeMount() {
    window.addEventListener("resize", this.onResize.bind(this));
  },
  methods: {
    onResize() {
      if (window.innerWidth >= 320) this.windowSize = "mobile";
    },
  },
};
</script>

<style>
    .set-nav{
        height: 15rem;
        background-color: var(--color-dark-blue);
        margin-bottom:10rem;
    }
    .container{
        width: 80%;
    }
    .logo{
        height: 25rem;
    }
    .nav-link{
         font-size: 2.5rem;
         font-weight: bold;
         margin: 2rem;
         list-style-type: none;
         color: orange !important;
    }
    .nav-link:hover{
        color: white !important;
        transition: 0.3s ease-in-out;
    }
    .header{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #3e80c3;
        width: 100%;
    }
    .header-links{
        list-style-type: none;
        margin-left: auto;
        margin-top: 1rem;
    }
    .header-link{
        display: inline-block;
    }
    .header-nuxt{
        font-size: 2.5rem;
        color: orange !important;
        margin: 2rem;
        /*display: flex;
        justify-content: center;
        align-items: center;*/
    }
    .terms:hover .terms-icon, .terms:hover .terms-link,
    .phone-number:hover .phone-icon, .phone-number:hover .phone-link{
        color: white !important;
        text-decoration: none;
        transition: 0.3s ease-in-out;
    }
    
    @media (max-width: 992px) and (min-width: 320px) {
  img.desktop {
    display: none;
  }
  #navbarSupportedContent .nav {
    width: 100%;
  }
  .nav {
    align-items: left;
    flex-direction: column;
    position: relative;
    background-color: var(--color-dark-blue);
    
  }
  .nav-link {
    height: 6rem;
  }
  .nav-item {
    height: auto;
    text-align: center;
  }
  /* .nav-part {
    align-items: left;
    flex-direction: column;
  } */
  .navbar-toggler {
    width: 4rem;
    align-items: center;
    margin-top: -1rem;
    margin-right: 3rem;
    cursor: pointer;
    border: none;
    background-color: transparent !important;
  }

    }
@media (max-width: 1400px) and (min-width: 992px) {
  img.mobile {
    display: none;
  }
}
@media (max-width: 320px) and (min-width: 0px) {
  img.mobile {
    display: none;
  }
  img.desktop {
    display: none;
  }
}
@media (min-width: 1400px) {
  img.mobile {
    display: none;
  }
}
</style>

我尝试了小JS和CSS代码，我在互联网上找到的，但它不工作.我也尝试了三重看，再次它不工作，不想使用或修复这个问题.也许，我使用的代码，我发现在错误的地方.谢谢大家！