如何使用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比较您的标记，我看到了两个问题：导致你的菜单不能正常工作。我已在下面列出它们：

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>