javascriptを使用してドロップダウンメニューを作成しようとしていて、動作していませんか？

私はjavascriptで本当に新しいですが、私が言うことができる限り、ここにあるコードは動作するはずです。私は（何もそのことについてまで来ることはありません）、コンソールに表示したときにエラーが出てくるんやウェブサイトに表示されるすべてのは何とすでにページjavascriptを使用してドロップダウンメニューを作成しようとしていて、動作していませんか？

<html> 
<body> 
<nav> 
<ul> 
    <li> 
    <button class="accordion">Collections</button> 
    <ul class="dropDown"> 
     <li><p>Mojica Lookbook</p></li> 
     <li><p>Andrade Editorial</p></li> 
     <li><p>Bell Videos</p></li> 
    </ul> 
    </li> 
    <li> 
    <a href="shop.html">Shop</a> 
    </li> 
    <li> 
    <a href="stores.html">Stores</a> 
    </li> 
    <li> 
    <a href="contact.html">Contact</a> 
    </li> 
    <li> 
    <img src="mojica_lookbook/mojica_credits.png" class="credits"> 
    </li> 
</ul> 
</nav> 
</body> 

    <script> 

     var dropDown = document.getElementsByClassName("dropDown"); 
     var i = 0; 

     for(i = 0; i < dropDown.length; i++) { 
     dropDown[i].onclick = function(){ 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
     } 
     </script> 

    </html>

出典

2016-08-04 ashumway

に登場するリスト項目をしないボタンです私はあなたがonclickのコールバックに渡された要素を使用する必要があると信じています。代わりにコールバック内のthisキーワードを使用するのでは、これを試してみてください。

for(i = 0; i < dropDown.length; i++) { 
    dropDown[i].onclick = function(e){ 
    e.target.classList.toggle("active"); 
    e.target.nextElementSibling.classList.toggle("show"); 
    } 
}

いくつかの例hereがあります。ボタンについては、クリックイベントをマップしていないので、説明したとおりに何もしません。

出典

2016-08-04 22:17:40

javascriptを使用してドロップダウンメニューを作成しようとしていて、動作していませんか？

答えて

関連する問題