我尝试通过以下方式使用 Javascript 实现打开和关闭下拉菜单的方法this https://www.w3schools.com/howto/howto_js_dropdown.aspw3schools.com 上的教程。虽然“显示”下拉菜单的功能有效,但关闭下拉菜单的功能却不起作用。此外,这段代码旁边没有任何解释来解释为什么它should工作,使得调试变得困难。
/* 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('.dropbtn')) {
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');
}
}
}
}
因此,我的问题是
1)是否有教程中的代码should用于关闭下拉菜单的目的。 (已回答)
2)为了让我自己和未来遇到相同教程和问题的新手清楚起见,有人可以澄清这应该如何/为什么起作用吗? (未答复)
编辑(我的尝试):
HTML:
<div class="sharedown">
<p onclick="shareVis()" class="sharebtn">  Share</p>
<div id="mySharedown" class="sharedown-content">
<a href="#">Self</a>
<p>User</p><input type="text" name="user-name" placeholder="Share to">
<a href="#">Community</a>
</div>
</div>
JS:
function shareVis() {
document.getElementById("mySharedown").className = "show";
}
window.onclick = function(event) {
if (!event.target.matches('sharebtn')) {
var sharedowns = document.getElementsByClassName("sharedown-content");
var i;
for (i = 0; i < sharedowns.length; i++) {
var openSharedown = sharedowns[i];
if (openSharedown.classList.contains('show')) {
openSharedown.classList.remove('show');
}
}
}
}
CSS:
/* Share dropdown menu */
p.sharebtn {
color: darkgrey;
font-family:calibri;
padding: 0px;
margin: 0px;
font-size: 12;
border: none;
cursor: pointer;
display: inline;
}
/* Dropdown button on hover & focus */
p.sharebtn:hover, p.sharebtn:focus {
color: grey;
}
/* The container <div> - needed to position the dropdown content */
.sharedown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.sharedown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0 2px 4px 1px #C4E3F5;
z-index:1; /* place dropdown infront of everything else*/
}
.sharedown-content a {
color: black;
padding: 5px 5px;
text-decoration: none;
display: block;
}
/* 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;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0 2px 4px 1px #C4E3F5;
opacity: 1;
z-index:1;}