javascript、html、cssを使用して画像をボタンにするにはどうしたらいいですか？

Question

クリックすると、リンクを含むドロップダウンメニューが開きます。 完全なコードも入力してください。ここで は私が持っているイメージ/ボタンのコードです：ここで

<div class="navBar"> 
<img src="nav_icon.jpg" class="navButton" alt="Navigation Links"> 
<div class="dropdown-content"> 
    <a href="#">Home</a> 
<a href="#">Get Involved</a> 
    <a href="#">About Us</a> 
    <a href="#">Contact Us</a> 
</div> 
</div> 

は本当に関係ありませんCSSの一部（:)

.dropdown-content{ 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 

} 
.navButton{ 
    height:20px; 
    width:20px; 


} 
.navBar{ 
    float:right; 
    height: 10px; 
    width:20%; 
    padding-top:4.2%; 
    position: relative; 
    display: inline-block; 
} 

である私は、次の例を試してみました、代わりに私が欲しいものを作るのどの、すべてのリンクが表示されます： W3 Schools

Answer 1

あなたが提供しているHTMLから、あなたがW3School's Exampleであなたのマークアップを比較すると、私は2つの問題それを参照してくださいメニューが正しく動作しない原因になっています。私はそれらを以下に挙げました：

1. ドロップダウンメニューには、id属性が必要です。

   <div id="myDropdown" class="dropdown-content">

   // ^^^----- This id attribute should be added. 
   

2. あなたは、メニューにそれがクリックされるたびに、ドロップダウン切り替わります.navButton上のクリックイベントハンドラを追加するのを忘れ。それと

   <img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">

            // ^^^ Add this inline click handler 
   

/* When the user clicks on the button, 
 
toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.navButton')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

/* Dropdown Button */ 
 
.navButton { 
 
    height:20px; 
 
    width:20px; 
 
} 
 

 
/* Dropdown button on hover & focus */ 
 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
/* The container <div> - needed to position the dropdown content */ 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
/* Dropdown Content (Hidden by Default) */ 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
/* Links inside the dropdown */ 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
/* Change color of dropdown links on hover */ 
 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
 
.show {display:block;}

<div class="navBar"> 
 
    <img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links"> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Home</a> 
 
    <a href="#">Get Involved</a> 
 
    <a href="#">About Us</a> 
 
    <a href="#">Contact Us</a> 
 
    </div> 
 
</div>