JavaScript：ハイパーリンクのonClick値を変更する

Question

ボタン/ハイパーリンクを作成しようとしています。これはナビゲーションバーを非表示にして表示することができます。最初は隠れていて、a要素をクリックするとスタイルが変わり、表示されます。しかし、それは2度目のクリックで再び隠されることはありません。 min-width: 480がfalseの場合、ハイパーリンクが表示されます（携帯電話や小さなブラウザウィンドウの場合のみ）。

onClickの値をjavascriptで変更しようとしました。私はそれを下に示します。

\t \t <script type="text/javascript"> 
 
\t \t \t function showNavBar() { 
 
\t \t \t \t document.getElementById("navigationBar").style.display = "block"; 
 
\t \t \t \t document.getElementById("navigationBar").onClick = function() { hideNavBar(); }; 
 
\t \t \t } 
 
\t \t \t function hideNavBar() { 
 
\t \t \t \t document.getElementById("navigationBar").style.display = "none"; 
 
\t \t \t \t document.getElementById("navigationBar").onClick = function() { showNavBar(); }; 
 
\t \t \t } 
 
\t \t </script> 
 
... 
 
\t \t <a href="javascript:void(0);" onclick="showNavBar();" class="mobileShow">MenuButton</a> 
 
\t \t 
 
\t \t <nav id="navigationBar" class="main"> <!-- begin navigation bar --> 
 
\t \t \t <ul id="navigationList" class="icon-list"> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-menu" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Menu</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-highscore" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Highscore</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-facebook" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Facebook</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-legalnotice" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Legal Notice</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> \t \t \t 
 
\t \t \t </ul> 
 
\t \t </nav> <!-- end navigation bar --> 
 
\t \t <section class="main"> 
 
      ... 
 
\t \t </section> 
 
\t </body> 
 
</html>

私はまたsetAttribute()と同様のものを試してみましたが、同じ結果を持つ関数を呼び出すためにhref属性を使用して。 onClickの値が1回変更された後に動作しない理由がわかりません。私は助けが切望されています。

乾杯。

Answer 1

あなたはjQueryのを使用していると仮定すると、あなたが.toggle()メソッドを使用できます。

function toggleNavbar() 
{ 
    $("#navigationBar").toggle(); 
} 

<a href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a> 

たびにクリックします、それはどちらかが表示されますか、それがある状態に応じて、それを隠します。あなたはjQueryのを使用していないと仮定すると、

---

：

function toggleNavbar() 
{ 
    var navbar = document.getElementById("navigationBar"); 
    if (navbar.style.display == 'block' || navbar.style.display=='') 
    { 
     navbar.style.display = 'none'; 
    } 
    else 
    { 
     navbar.style.display = 'block'; 
    } 
} 

<a href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a> 

Answer 2

のみ1関数は

<script>    
     function showHideNavBar() { 
     var myStyle = document.getElementById("navigationBar").offsetLeft; 

     // check if menu is hidden 
     if(myStyle < 0){ 
      document.getElementById("navigationBar").style.display = "block"; 
     } else { 
      document.getElementById("navigationBar").style.display = "none"; 
     } 
    } 
    </script> 
    <a href="javascript:void(0);" onclick="showHideNavBar();" class="mobileShow">MenuButton</a> 

Answer 3

を必要と考えられる解決策は次のようになります。

<script type="text/javascript"> 
    var el = document.getElementById("navigationBar"); 
    el.addEventListener("click", function(){ 
     if (el.style.display === "block") { 
      el.style.display = "none"; 
     } else { 
      el.style.display = "block"; 
     } 
    }); 
</script>