アンカーリンクにJavaScriptが効かない

Question

前提

「言語切り替え」のボタンをクリックしたら言語が変わる仕様にしています。

実現したいこと

        <a class="navbar-brand  toggleBox-jp" href="#">毎日にヨーグルトを</a>
        <a class="navbar-brand  toggleBox-en" href="#">yogurt with your everyday</a>

h1やpは言語の切り替えができるのですが、ここはできません...

該当のソースコード

    <!-- ON NAVBAR  -->

    <div class="on-navbar">
        <h1 class="toggleBox-en">my yogurt collection</h1>
        <h2 class="toggleBox-jp">私のヨーグルト</h2>

        <button id="translation" >言語切り替え</button>

        <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-index-thumb" viewBox="0 0 16 16">
        <path d="M6.75 1a.75.75 0 0 1 .75.75V8a.5.5 0 0 0 1 0V5.467l.086-.004c.317-.012.637-.008.816.027.134.027.294.096.448.182.077.042.15.147.15.314V8a.5.5 0 0 0 1 0V6.435l.106-.01c.316-.024.584-.01.708.04.118.046.3.207.486.43.081.096.15.19.2.259V8.5a.5.5 0 1 0 1 0v-1h.342a1 1 0 0 1 .995 1.1l-.271 2.715a2.5 2.5 0 0 1-.317.991l-1.395 2.442a.5.5 0 0 1-.434.252H6.118a.5.5 0 0 1-.447-.276l-1.232-2.465-2.512-4.185a.517.517 0 0 1 .809-.631l2.41 2.41A.5.5 0 0 0 6 9.5V1.75A.75.75 0 0 1 6.75 1zM8.5 4.466V1.75a1.75 1.75 0 1 0-3.5 0v6.543L3.443 6.736A1.517 1.517 0 0 0 1.07 8.588l2.491 4.153 1.215 2.43A1.5 1.5 0 0 0 6.118 16h6.302a1.5 1.5 0 0 0 1.302-.756l1.395-2.441a3.5 3.5 0 0 0 .444-1.389l.271-2.715a2 2 0 0 0-1.99-2.199h-.581a5.114 5.114 0 0 0-.195-.248c-.191-.229-.51-.568-.88-.716-.364-.146-.846-.132-1.158-.108l-.132.012a1.26 1.26 0 0 0-.56-.642 2.632 2.632 0 0 0-.738-.288c-.31-.062-.739-.058-1.05-.046l-.048.002zm2.094 2.025z"/>
      </svg> -->

    </div>



    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
        <a class="navbar-brand  toggleBox-jp" href="#">毎日にヨーグルトを</a>
        <a class="navbar-brand  toggleBox-en" href="#">yogurt with your everyday</a>

        <button class="navbar-toggler btn-outline-primary" type="button" data-toggle="collapse"
            data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
            <!-- mr / ml で左右の位置調節１ -->
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">ヨーグルトとは <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">elite force</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <!-- <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form> -->
        </div>
    </nav>

// ON NAVBAR
// 初期に見えなくする
$('.toggleBox-en').addClass('display-none');

$('#translation').click(function() {
    // $('.toggleBox').toggleClass('display-none');
    // if($('.english')) {

        // $('.toggleBox').toggleClass('display-none')
            $('.toggleBox-en').toggleClass('display-none');
            $('.toggleBox-jp').toggleClass('display-none');
    // }
});

/* ON NAVBAR */
.on-navbar {
  text-align: center;
  height: 10vh;
  display: flex;
  justify-content:center;
  position: relative;
}

.on-navbar button {
  position: fixed;
  right: 10px;
  bottom: 10vh;
  border: 1px solid #0277D7;

}

.display-none {
  display: none;
}



/* --------------------------------- */

/* NAVBAR */

nav {
  background-color: #0277D7;
  min-height: 15vh;
}

Comments

[int32_t]

CSSも開示してください。

Answer 1

私の環境ではaタグ部分も言語の切り替えが問題なくできています。
ただし、2つのclassの間に半角スペースがそれぞれ2つはいってしまっていますので、1つに修正した方がいいかもしれません。
お試しください。

-        <a class="navbar-brand  toggleBox-jp" href="#">毎日にヨーグルトを</a>
+        <a class="navbar-brand toggleBox-jp" href="#">毎日にヨーグルトを</a>

-        <a class="navbar-brand  toggleBox-en" href="#">yogurt with your everyday</a>
+        <a class="navbar-brand toggleBox-en" href="#">yogurt with your everyday</a>

Answer 2

検証ツールで確認したところ、navbar-brandに

.navbar-brand {
 display: block
}

と表示されていたので.display-noneが効かなかったのだと思います。navbar-brandをなくしたら切り替えができるようになりました！コメント頂いた方々ありがとうございました。