toggleClassは最初のクリック（IE、FF）でのみ動作します

Question

これは私の最初の質問です。私自身は答えを見つける前にほとんど助けを求めることはありませんが、

私は次があります。

HTML

<!-- This one opens/shows the nav. I should change div to a button tag --> 
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div> 
<nav id="navigation" class="navigation"> 
    <!-- This on closes/hide the nav --> 
    <button type="button" value="Close" class="button-close"> 
     <a id="menu-close" class="menu-close">X</a> 
    </button> 
    <h1>User Name</h1> 
    <p class="mail"><sec:authentication property="principal.username" /></p> 
</nav> 

CSS

.navigation { 
     position: fixed; 
     background: #fff; 
     width: 100%; 
     height: 100vh; 
     top: 0; 
     z-index: -100; 
     display: none; 
     text-align: center; 
     font-weight: bold; 
} 

.navigation-open { 
     z-index: 100; 
     display: inherit; 
} 

jQueryの

$(document).ready(function(){ 

    $(".menu-open").click(function(){ 
     $(".navigation").toggleClass("navigation-open")     
    }); 
    $(".menu-close").click(function(){ 
     $(".navigation").toggleClass("navigation-open") 
    }); 
}); 

私はメニューオープンクラス、実際にそれにタグを打ちますnavタグ（m私は、toggleClassが動作していると思う）、しかしその直後、私はメニュークローズクラスでタグを打ち、トグルが実行されていない。

この問題はIEとFFで起こるが、私は、私はすでに試した、IE 11、FF 46

をCH 52を使用してい

をCHません：

• をjQueryのバージョンを変更します1.1からHTMLへ処理をe.stopPropagation（）関数を使用し、リダイレクト
• を3.xへ

これは私がナッツを運転しているので、私はこの1つの助けに感謝します。

ありがとうございます！

Answer 1

ボタン要素内にアンカーがあってはなりません。

チェックこの：

$(document).ready(function(){ 
 

 
    $(".menu-open").click(function(){ 
 
     $(".navigation").toggleClass("navigation-open")     
 
    }); 
 
    $(".menu-close").click(function(){ 
 
     $(".navigation").toggleClass("navigation-open") 
 
    }); 
 
});

.navigation { 
 
     position: fixed; 
 
     background: #fff; 
 
     width: 100%; 
 
     height: 100vh; 
 
     top: 0; 
 
     z-index: -100; 
 
     display: none; 
 
     text-align: center; 
 
     font-weight: bold; 
 
} 
 

 
.navigation-open { 
 
     z-index: 100; 
 
     display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- This one opens/shows the nav. I should change div to a button tag --> 
 
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div> 
 
<nav id="navigation" class="navigation"> 
 
    <!-- This on closes/hide the nav --> 
 
    <button type="button" value="Close" class="button-close menu-close"> 
 
     X 
 
    </button> 
 
    <h1>User Name</h1> 
 
    <p class="mail"><sec:authentication property="principal.username" /></p> 
 
</nav>