前提・実現したいこと
ハンバーガーボタンをクリックしたら、メニューバーが表示され、もう一度クリックしたら元に戻るようにしたいです。
cssのvisibility: hidden;で非表示にさせておき、クリックしたらメニューを表示はできたのですが、ボタンを再度クリックしたら非表示に戻すためのjavascript内ではどのように書いたらいいのかわかりません。
どなたかご協力お願い致します。
該当のソースコード
javascript var clfunc = function(){ document.getElementById('visi').style.visibility ="visible";
HTML <div class="gblnv_box" onclick="clfunc();"> <a class="menu-trigger" href="#"> <span></span> <span></span> <span></span> </a> <div class="gblnv_block"> <ul id="visi" class="gblnv_list"> <!-- ←ハンバーガーボタン内、グローバルメニュー --> <li>bar1</li> <li>bar2</li> <li>bar3</li> <li>bar4</li> </ul> </div> </div>
css .menu-trigger, .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger{ position: absolute; width: 50px; height: 44px; margin: 4%; } .menu-trigger span{ position: absolute; left: 0; width: 100%; height: 4px; background-color: rgba(0, 0, 0, 1); border-radius: 4px; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 20px; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .gblnv_list a{ color: #000000; } .gblnv_block{ position: absolute; } .gblnv_list{ display: block; visibility: hidden; } .gblnv_list{ display: block; visibility: hidden; }
回答1件
あなたの回答
tips
プレビュー