햄버거 버튼이 왜 안될까요

<div class="container">

    <div class="row">

        <div class="col-12">

            <nav class="main-nav" style="margin-right: 50px;">

                <ul class="nav">

                    <li><a href="/aaa">1111111</a></li>

                    <li><a href="/bbb">2222222</a></li>

                    <li><a href="/ccc">3333333</a></li>

                </ul>

                <a class='menu-trigger'>

                    <span>Menu</span>

                </a>

            </nav>

        </div>

    </div>

</div>

 

<script>

if ($('.menu-trigger').length) {

    $(".menu-trigger").on('click', function () {

        $(this).toggleClass('active');

        $('.header-area .nav').slideToggle(200);

    });

}

</script>