Navbarが開いているときにCSSの切り替えをトリガーするJavascriptを使用する

Question

cssとjavascriptを使用してクリックすると「X」に変換されるハンバーガーメニューボタンがあります。メニューボタンがクリックされたときだけでなく、選択が行われたときにNavbarが閉じるので、メニューボタンは「X」のままです。

「if else」ステートメントを使用してメニューボタンをクリックする代わりに変更する必要があると仮定しますが、これをコード化する方法がわかりません。

私は、ボタンのスタイルのためのCSSコードと、それを変換するために現在使用されているjavascriptとnavbarのjavascriptを含んでいます。

ボタンのコードは、このサイトからです： http://callmenick.com/post/animating-css-only-hamburger-menu-icons

そして、ナビゲーションバーはこちらから： https://www.w3schools.com/howto/howto_js_sidenav.asp

ボタンのCSSコード：

.c-hamburger { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    width: 96px; 
    height: 96px; 
    font-size: 0; 
    text-indent: -9999px; 
    appearance: none; 
    box-shadow: none; 
    border-radius: none; 
    border: none; 
    cursor: pointer; 
    transition: background 0.3s; 
} 

.c-hamburger:focus { 
    outline: none; 
} 

.c-hamburger span { 
    display: block; 
    position: absolute; 
    top: 44px; 
    left: 18px; 
    right: 18px; 
    height: 8px; 
    background: white; 
} 

.c-hamburger span::before, 
.c-hamburger span::after { 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 100%; 
    height: 8px; 
    background-color: #fff; 
    content: ""; 
} 

.c-hamburger span::before { 
    top: -20px; 
} 

.c-hamburger span::after { 
    bottom: -20px; 
} 

.c-hamburger { 
    background-color: #ff3264; 
} 

.c-hamburger span { 
    transition: background 0s 0.3s; 
} 

.c-hamburger span::before, 
.c-hamburger span::after { 
    transition-duration: 0.3s, 0.3s; 
    transition-delay: 0.3s, 0s; 
} 

.c-hamburger span::before { 
    transition-property: top, transform; 
} 

.c-hamburger span::after { 
    transition-property: bottom, transform; 
} 

/* active state, i.e. menu open */ 
.c-hamburger.is-active { 
    background-color: #cb0032; 
} 

.c-hamburger.is-active span { 
    background: none; 
} 

.c-hamburger.is-active span::before { 
    top: 0; 
    transform: rotate(45deg); 
} 

.c-hamburger.is-active span::after { 
    bottom: 0; 
    transform: rotate(-45deg); 
} 

.c-hamburger.is-active span::before, 
.c-hamburger.is-active span::after { 
    transition-delay: 0s, 0.3s; 
} 

ボタンJavascriptを：

(function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
    var toggle = toggles[i]; 
    toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
    toggle.addEventListener("click", function(e) { 
     e.preventDefault(); 
     (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); 
    }); 
    } 

})(); 

ナビゲーションバーのJavascript：

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */ 
function openNav() { 
document.getElementById("mySidenav").style.width = "200px"; 
open = true; 


} 

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */ 
function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
open = false; 

} 

誰かがこれを行うには、正しいコードを見つける私を助け、またはより良いアイデアを持っていることができれば、私はそれを本当に感謝。あなたがすでに話すことができないなら、私はJavascriptにはかなり新しいです。

ありがとうございます！

Answer 1

私は、あなたが何をしているのか分かりませんでした。 「X」をクリックしたときだけでなく、ボタンをクリックしたときにNavBarを閉じることを意味しましたか？

もしそうなら、HTMLコードでは、すべてのボタンにonclick="closeNav();"を追加するだけで済みます。この

<button onclick = "closeNav();"> My Button </button> 

---

[OK]をのようなもの。 NavBarが開いているときにボタンを「X」に変更したいので、ボタンにIDを指定する必要があります。次に、次のJavascript条件を使用できると思います。

HTML

<button id="myButton" class="c-hamburger c-hamburger--htx"> 
    <span> 
     ::before 
     "toggle menu" 
     ::after 
    </span> 
</button><!--I copied from the site you provided--> 

Javascriptを 私は申し訳ありませんが、私は私が作るしようとしている、それは近くにするつもりはないよ、あなたのsidenav.js

function decide(){ 
    if(open == true){ 
    closeNav();  
    }else{ 
    openNav();  
    } 
} 

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */ 
function openNav() { 
    document.getElementById("mySidenav").style.width = "200px"; 
    document.getElementById("myButton").classList.add("is-active"); 
    open = true; 
} 

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */ 
function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("myButton").classList.remove("is-active"); 
    open = false; 
}