css - 点击事件后出现和隐藏反应应用程序汉堡菜单

Question

我有一份汉堡菜单。我的问题是当用户点击汉堡菜单按钮时，它会立即出现并隐藏。这是我无法弄清楚的错误/问题。请让我知道是否需要添加或更改任何内容。

HTML：

<nav class="Header navbar navbar-expand-lg navbar-light container">
<span class="navbar-brand"><img src={require("../Assets/Images/hair_salon_logo1.png").default}/></span>
<button aria-controls="basic-navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarMenu"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse" id="navbarMenu">
<div class="me-auto navbar-nav">
<a href="#" class="nav-link" role="button">Home</a>
<a href="#" class="nav-link" role="button">Service</a>
<a href="#" class="nav-link" role="button">Stylists</a>
<a href="#" class="nav-link" role="button">Appointment</a>
<a href="#" class="nav-link" role="button">Contact Us</a>
</div>
<div class="SocialMedia ms-auto d-flex">
  <ul>
    <li><a href=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="Twitter" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm215.3 337.7c.3 4.7.3 9.6.3 14.4 0 146.8-111.8 315.9-316.1 315.9-63 0-121.4-18.3-170.6-49.8 9 1 17.6 1.4 26.8 1.4 52 0 99.8-17.6 137.9-47.4-48.8-1-89.8-33-103.8-77 17.1 2.5 32.5 2.5 50.1-2a111 111 0 0 1-88.9-109v-1.4c14.7 8.3 32 13.4 50.1 14.1a111.13 111.13 0 0 1-49.5-92.4c0-20.7 5.4-39.6 15.1-56a315.28 315.28 0 0 0 229 116.1C492 353.1 548.4 292 616.2 292c32 0 60.8 13.4 81.1 35 25.1-4.7 49.1-14.1 70.5-26.7-8.3 25.7-25.7 47.4-48.8 61.1 22.4-2.4 44-8.6 64-17.3-15.1 22.2-34 41.9-55.7 57.6z"></path></svg></a></li>
    <li><a href=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="Facebook" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg></a></li>
    <li><a href=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="Youtube" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M941.3 296.1a112.3 112.3 0 0 0-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0 0 82.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z"></path></svg></a></li>
    </ul>
    <ul class="HeadSearchBar"><li><a href=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="SearchBar" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></a></li>
    </ul>
</div>
</div>
</nav>

CSS：

@media only screen and (min-width: 320px) and (max-width: 768px)  {
  .navbar-light .navbar-toggler {
    position: absolute;
      right: 0;
      margin-right: 15px;
  }
  }

标签： cssreactjsbootstrap-4responsive-designresponsiveness