メニューの表示（js/jQuery）

Question

実現したいこと

menu-triggerを押すとメニューバーが表示される

前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

menu-triggerが反応しない```

### 該当のソースコード

```ここに言語名を入力
■html
<div class="menu-var">
            <div class="menu-trigger">
              <span></span>
              <span></span>
            </div>
            <nav class="g-navi">
             <div class="nav-wrapper">
              <ul class="ul">
               <li class="li li-home"><a href="/top">HOME</a></li><br>
               <li class="li li-prof"><a href="/profile-edit">プロフィール編集</a></li><br>
               <li class="li"><a href="/logout">ログアウト</a></li>
              </ul>
             </div>
            </nav>
         </div>
        <!-- jsの読み込み -->
        <script src="{{ asset('js/script.js') }}"></script>
        <!-- jQueryの読み込み -->
       <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>


■CSS
.menu-var {
    position: fixed;
    top: 200px;
    left: 86%;
    color: white;
    text-align: center;
}

.menu-trigger span:nth-child(1) {
    position: fixed;
    top: 40px;
    /* 7px差 */
    right: 113px;
    display: inline-block;
    transform: rotate(60deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger span:nth-child(2) {
    position: fixed;
    top: 40px;
    right: 120px;
    display: inline-block;
    transform: rotate(-60deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger.active span:nth-child(1) {
    position: absolute;
    top: 0px;
    left: 102px;
    display: inline-block;
    transform: rotate(-120deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger.active span:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 95px;
    display: inline-block;
    transform: rotate(120deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.g-navi {
    transform: translateY(0%);
    transition: .5s ease-in-out;
    display: block;
    position: fixed;
    bottom: 236px;
    right: 0px;
    z-index: 3;
    width: 288px;
    height: 251px;
    background-color: aquamarine;
}

.g-navi ul {
    display: block;
    margin-top: 30px;
}

.g-navi ul li {
    display: block;
    margin-top: 22px;
    padding-bottom: 30px;
}

.li-home {
    border-bottom: 1px solid #6C6C6C;
}

.li-prof {
    border-bottom: 1px solid #6C6C6C;
}

.g-navi.active {
    transform: translateY(100%);
    transition: .5s ease-in-out;
}

■js
$(function () {
  $('.menu-trigger').click(function () {
    $(this).toggleClass('active');
    if ($(this).hasClass('active')) {
      $('.g-navi').addClass('active');
    } else {
      $('.g-navi').removeClass('active');
    }
  });
  $('.g-navi ul li a').click(function () {
    $('.menu-trigger').removeClass('active');
    $('.g-navi').removeClass('active');
  });
});


### 発生している問題・エラーメッセージ

menu.triggerが反応しない

### 該当のソースコード

```ここに言語名を入力
.menu-trigger span:nth-child(1) {
    position: fixed;
    top: 40px;
    right: 113px;
    display: inline-block;
    transform: rotate(60deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger span:nth-child(2) {
    position: fixed;
    top: 40px;
    right: 120px;
    display: inline-block;
    transform: rotate(-60deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger.active span:nth-child(1) {
    position: absolute;
    top: 0px;
    /* 7px差 */
    left: 102px;
    display: inline-block;
    transform: rotate(-120deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}

.menu-trigger.active span:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 95px;
    display: inline-block;
    transform: rotate(120deg);
    width: 13px;
    height: 1px;
    background-color: white;
    border: none;
}```

### 試したこと

jQueryが反応していない？
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

掲載コードだけではかなり崩れているので、
何がしたいのかよくわかりませんが、.menu-triggerは反応していますよ。

おそらく開閉用の×ボタンだと思いますが、
下記のように変えてみると動作しているのがわかるはずです。

トリガーの×のスタイルを維持したまま、改善したい場合は、
全文コード掲載してください。

<div class="menu-trigger">
      <span></span>
      <span></span>
</div>

↓

<div class="menu-trigger">トリガー</div>

Comments

[21oimo12]

ご回答ありがとうございます。
コードが分かりにくくとても申し訳ないです。
ご教授いただいた方法で試してみたのですが、こちらではトリガー（menu-trigger）のクッリクができませんでした。
NKTIDKSG様のほうでは、クリックができたという認識でしょうか？

[NKTIDKSG]

はい、挙動として正しいかはさておき、
トリガーは動いております。

色が白なので背景はグレーに変えています。
https://drive.google.com/file/d/1IajBPBLn84Ac62P9myOEZL2A4U8zfwDm/view?usp=sharing