通过在Javascript中单击外部来关闭下拉列表(教程说明) [英] Closing dropdown by clicking outside in Javascript (tutorial clarification)

问题描述

我试图通过此方法来实现使用Javascript打开和关闭下拉菜单的方法 w3schools.com上的教程.虽然显示"下拉菜单的功能有效，但关闭它的功能无效.此外，此代码旁边没有任何解释来解释为什么应该起作用，从而使调试变得困难.

I have attempted to implement the method of opening and closing a drop-down using Javascript via this tutorial on w3schools.com. While the function to "show" the drop-down works, the one to close it does not. Furthermore, there is no explanation alongside this code to explain why it should work, making it difficult to debug.

/* 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)教程 中的代码是否应出于关闭下拉菜单的目的而工作.(回答)

1) whether the code in the tutorial should work for the purpose of closing the drop-down. (ANSWERED)

2)为了清楚自己和将来遇到同一教程和问题的新手，有人可以请问这应该如何/为什么起作用?(不信任)

2) Could someone please clarify how/why this should work, for the sake of clarity for myself and future newbies who make come across the same tutorial and issue? (UNANSWERED)

编辑(我的尝试):

HTML:

<div class="sharedown">     
    <p onclick="shareVis()" class="sharebtn">&nbsp 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;}

推荐答案

问题出在 shareVis 函数中.在这里

The issue lies in shareVis function. Here

document.getElementById("mySharedown").className = "show";

您正在将 #mySharedown 类名替换为 show .然后在 window.onclick

you are replacing #mySharedown class name to show. Then in window.onclick

var sharedowns = document.getElementsByClassName("sharedown-content");

您没有得到任何 sharedowns ，因为您已经将类名替换为 show .

---

您可以将 show 类添加到 classList

you are not getting any sharedowns as you already replaced the class name to show.

---

You can either add show class into classList

document.getElementById("mySharedown").classList.add("show");

或将类名替换为 sharedown-content show

document.getElementById("mySharedown").className = "sharedown-content show";

下面的工作解决方案:

function shareVis() {
    //document.getElementById("mySharedown").className = "sharedown-content show";
    document.getElementById("mySharedown").classList.add("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');
            }
        }
    }
}

document.getElementById("mySharedown").addEventListener('click',function(event){
    event.stopPropagation();
});

#mySharedown{
  display: none;
  border: 1px solid black;
}

#mySharedown.show {
  display: block;
}

<div class="sharedown">     
    <p onclick="shareVis()" class="sharebtn">&nbsp 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>

要防止 #mySharedown 中的第二次单击隐藏 #mySharedown ，您应该为 #mySharedown 并防止其冒泡

To prevent the second click within #mySharedown from hiding #mySharedown, you should add another click event for #mySharedown and prevent it from bubbling up, like this

document.getElementById("mySharedown").addEventListener('click',function(event){
    event.stopPropagation();
});

更新包含在工作解决方案中

Updates are included in the working solution

这篇关于通过在Javascript中单击外部来关闭下拉列表(教程说明)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！