このクリック可能なドロップダウンメニューが表示されないのはなぜですか？

Question

私はドロップダウンメニューを持っています。その上にマウスカーソルを置くと、CSSの.showメニューをオン/オフに切り替えるJavaScriptが追加され、モバイルデバイスのホバーCSSをクリックして削除します。私の問題は、クリックしたときにメニューが表示されないことです。私はdevのツールでは、CSSクラスが削除されていることを確認することができますので、JavaScriptが正常に動作しているので、それはCSSの問題と思われる。しかし、私はこの問題の原因となるCSSの競合を見逃しています。誰もが、問題はここにあるものの任意のアイデアを持ってい-thanks

を私ははっきり何か https://jsfiddle.net/kmut5xtu/

 <nav> 
      <ul class="main-nav"> 
       <li class="main-nav-item current-page"><a href="index.html">Home</a></li> 
       <li class="main-nav-item"><a href="about.html">About</a> 
       </li> 
       <li class="main-nav-item characters"> 
        <span>Characters</span> 
        <ul class="drop-menu"> 
         <li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li> 
         <li><a href="characters.html%20#ethan-clarke">Ethan Clarke</a></li>   
         <li><a href="characters.html%20#serena-kiriaga">Serena Kiriaga</a></li> 
         <li><a href="characters.html%20#marcus-flynn">Marcus Flynn</a></li> 
         <li><a href="characters.html%20#emily-ashdown">Emily Ashdown</a></li> 
         <li><a href="characters.html%20#miles-west">Director Miles West</a></li> 
        </ul> 
       </li> 
       <li class="main-nav-item"><a href="auther.html">Author</a></li> 
      </ul> 
     </nav> 


    !function app(){ 

     !function AddMenuClickHandler(){ 
       let charTab= document.querySelector(".characters"); 
       let toggle= 1; 

       charTab.addEventListener("click",function(){ 
        let dropMenu=document.querySelector(".drop-menu"); 
        if(toggle===1){ 
         dropMenu.classList.add("show-menu"); 
         toggle=0; 
        } 
        else if(toggle===0){ 
         dropMenu.classList.remove("show-menu"); 
         toggle=1; 
        } 
       }) 
      }() 
    }() 

Answer 1

を欠けているように私には、以下のCSSが問題であるjsfiddle全体のCSSシートを追加しました：？

.characters:hover { 
      position: relative; 
      border-radius: 8px 8px 0 0; 
      } 
    .characters:hover .drop-menu{ 
      visibility: visible; 
      opacity:1; 
     } 

これらのCSSからホバーを削除しても問題ありません。

Answer 2

バットを外して、JSを使用していることをHTMLに伝える必要があります。あなたはスクリプトタグでこれを行う：

<script> 
    Your code here 
</script> 

私は個人的にちょうどそれらがクリック可能なブートストラップを使用する場合、BootStrap uses、ことを確認するために本当に簡単な方法があり、携帯電話上のクリック可能なメニューを無効にするには、JSを使用していないが、モバイルビューのものを簡単に変更することができます。