BOOTSTRAP 3:自定义导航栏切换问题

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏头部 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>

    <!-- 导航菜单 -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

// 更改切换按钮图标
$('.navbar-toggle').on('click', function() {
  $(this).toggleClass('active');
});

// 添加动画效果
$('.navbar-toggle').on('click', function() {
  $('#navbar-collapse').slideToggle('fast');
});