修正BootStrap4でのハンバーガーメニューの制御について

以下のような構成のHTMLでBootStrap4を使いハンバーガーメニューを設置しています。

768px以下のビューポートで表示されるハンバーガーメニューをタップするとメニューがせり出してくるの機能の参考資料をいじっているのですが、タップしたあとのハンバーガーメニューのアイコン部分の要素が横三本線のままなのでバツになるようなSVGにしようとしています。ハンバーメニューがタップされるとアイコン表示用要素（span）に’active’というCSSクラスを付与してバツのSVGに置き換わるようにしたのですが、クリックイベントでそのコードを追加すると確かにクラスが切り替わってハンバーガーの表示はバツに変わるのですが、メニューがスライドして出てくる機能が効かなくなってしまいます。これはどう回避すべきでしょうか？

HTML
1<nav class="navbar navbar-expand-md navbar-light mb-3 px-md-0">
2    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="true" aria-label="ナビゲーションの切替"> 
3        <span class="navbar-toggler-icon"></span> 
4    </button>
5    <div class="collapse navbar-collapse" id="Navbar">
6        <ul class="navbar-nav w-100 justify-content-around">
7            <li class="nav-item"><a class="nav-link text-info" href="#sec1">メニュー1</a></li>
8            <li class="nav-item"><a class="nav-link text-info" href="#sec2">メニュー2</a></li>
9        </ul>
10    </div>
11</nav>

JavaScript
1$(function () {
2  $('.navbar-toggle').click(function () {
3    $('#gnavi').slideToggle(200);
4    $('.icon-bar').toggleClass('closeup');
5  });
6
7  // ↓これを有効にすると上の「$('.navbar-toggle').click」が効かなくなってしまう
8  $('.navbar-toggler').click(function (event) {									
9    $('.navbar-toggler-icon').toggleClass('active');
10    return false;
11  });
12});

そもそもクリックの対象要素のCSSクラス名はHTMLにあるように'.navbar-toggler'なのに、参考にしている資料のコードでのクラス名は'.navbar-toggle'で最後に’r’がついていません。これでできるのかな？と思いつつやってみるとちゃんとどうさするではありませんか！おどろきでした。実際にそのようなCSSクラスの要素はなくなぜ反応しているのかも不明ですが、実際にはちゃんとメニューがスライドインしてきます。また自分では設置していない#gnaviや.icon-barとか不明なものがコード内にあり根本的にBootStrapって勉強しないと使えないなと不安になっています。このようにBootStrap自体を全く触ったことがないのですが、これはどういう状態でしょうか？またどう解決すべきでしょうか？