navbar ハンバーガーからばつ印へ

前提

こちらの記事を真似しています。https://konpure.com/2019/04/28/post-10826/

実現したいこと

navbarの三本線をクリックしたらバツに変更させたいです。

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

①クリックしてもopenクラスが発生しません。
②.navbar-togglerのborder: 10px solid #444が反映されません。

記事では親要素がdivで私のはbuttonなのが原因なのでしょうか？

該当のソースコード

html

<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-gradient"> <div class="container-fluid"> <a class="navbar-brand" href="">yoriss67</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon bar1 open1"></span> <span class="navbar-toggler-icon bar2 open2"></span> <span class="navbar-toggler-icon bar3 open3"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="nav navbar-nav ms-auto flex-row "> <li class="nav-item pl-3"> <a class="fa-brands fa-2x fa-github" href="https://github.com/yoriss67" target="_blank"></a> <!-- <a class="nav-link" href="">Contact</a> --> </li> <li class="nav-item pl-3"> <a class="fa-brands fa-2x fa-twitter" href="https://twitter.com/iori73wsy" target="_blank"></a> <!-- <a class="nav-link" href="">Pricing</a> --> </li> <li class="nav-item pl-3"> <a class="fa-brands fa-2x fa-instagram" href="https://www.instagram.com/ioriiii_13/" target="_blank"></a> <!-- <a class="nav-link" href="">Download</a> --> </li> <li class="nav-item pl-3"><a href="#aboutme">About me</a></li> <li class="nav-item pl-3"><a href="#works">Works</a></li> <li class="nav-item pl-3"><a href="#skill">Skills&Tools</a> </li> <li class="nav-item pl-3"><a href="#contact"> Contact</a></li> </ul> </div> </div> </nav>

css

/* hamburger */ .navbar-toggler { position: relative; width: 50px; height: 50px; border: 10px solid #444; box-sizing: border-box;} .navbar-toggler-icon { display: block; width: 30px; height: 5px; background: #444; position: absolute; left: 10px; transition: all 0.5s ease;} .bar1 { top: 6.25px; background-color: blue; } .bar2 { top: 17.5px; top: 20px; background-color: yellow; } .bar3 { bottom: 6.25px; /* bottom: 20px; */ background-color: red; }/* ハンバーガーメニューがクリックされたら 上の線を真ん中に移動させて45℃回転 */ .bar1 .open { top: 20px; transform: rotate(45deg);} .bar2 .open { opacity: 0;} .bar3 .open { top: 20px; transform: rotate(-45deg);}

JavaScript

// hamburger $(function() { $('button').click(function() { $('.bar1, .bar2, .bar3').toggleClass('.open1, .open2, .open3'); })});

試したこと

補足情報（FW/ツールのバージョンなど）

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