我的导航栏切换箭头无法正常工作

Question

我制作了一个带有箭头图标（菜单显示时）和条形（菜单关闭时）的切换按钮，我制作了如下所示的代码。我面临的问题是：

1.) 当我第一次单击切换器时，3 个条形图标变成了箭头。但是，当我再次单击切换按钮时，它不会返回到 3 个条形图标。因此，切换器在打开和关闭时是不兼容的。应该是什么，当菜单显示时，会出现箭头图标，当菜单关闭时出现的是 3 bar 图标。

2.) 我已经在 CSS 中为箭头中的过渡编写了代码，但它仍然不起作用。

谁能帮帮我？

function toggleMenu() {
    if ($(".navbar-toggler").hasClass("collapsed")) {
        $(".navbar-toggler").removeClass("active");
    } else {
        $(".navbar-toggler").addClass("active");
    }
}

$(document).ready(function(){
    $('.navbar-toggler').on('click', function(){
          toggleMenu();
    });
});

.navbar-toggler {
    height: 35px;
  border:none !important;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler.active .icon-bar {
    border-radius: 20px;
    width: 35px;
}

.navbar-toggler.active .icon-bar::before {
    border-radius: 20px;
    width: 15px !important;
    transform: rotate(-35deg);
    top: -5px !important;
    transition: tranform ease-in-out;
}

.navbar-toggler.active .icon-bar::after {
    border-radius: 20px;
    width: 15px !important;
    transform: rotate(35deg);
    bottom: -5px !important;
    transition: tranform ease-in-out;
}

.navbar-toggler .icon-bar {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    width: 18px;
    height: 5px;
    display: block;
    position: relative;
}

.navbar-toggler .icon-bar::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
}

.navbar-toggler .icon-bar::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 1

在您的 JQuery 中，您正在检查“折叠”类，这在我看来是不必要的，因为您总是在单击切换器时隐藏或显示内容。所以你可以从 Jquery 切换到 toggleClass() 函数。我更改了您的代码并在我进行更改的地方留下了评论。如果我理解你的话，这就是你想要的样子

function toggleMenu() {
// the check for the "collapsed" claass is unecessary, you can simply toggle the class
        $(".navbar-toggler").toggleClass("active");
}

$(document).ready(function(){
    $('.navbar-toggler').on('click', function(){
          toggleMenu();
    });
});

.navbar-toggler {
    height: 35px;
  border:none !important;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler.active .icon-bar {
    border-radius: 20px;
    width: 35px;
}

.navbar-toggler.active .icon-bar::before {
    border-radius: 20px;
    width: 15px !important;
    transform: rotate(-35deg);
    top: -5px !important;
    /*you misspelled transform and you need to add a time for the transition*/
    transition: transform 1s ease-in-out;
}

.navbar-toggler.active .icon-bar::after {
    border-radius: 20px;
    width: 15px !important;
    transform: rotate(35deg);
    bottom: -5px !important;
    /*you misspelled transform and you need to add a time for the transition*/
    transition: transform 1s ease-in-out;
}

.navbar-toggler .icon-bar {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    width: 18px;
    height: 5px;
    display: block;
    position: relative;
}

.navbar-toggler .icon-bar::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
}

.navbar-toggler .icon-bar::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #2257A7;
    border-radius: 50px;
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>