Javascript 如何实现`window.onlick=function（event）{`关闭下拉菜单？_Javascript_Jquery_Html_Drop Down Menu_Submenu

Javascript 如何实现`window.onlick=function（event）{`关闭下拉菜单？

javascript jquery html drop-down-menu

Javascript 如何实现`window.onlick=function（event）{`关闭下拉菜单？,javascript,jquery,html,drop-down-menu,submenu,Javascript,Jquery,Html,Drop Down Menu,Submenu,我不认为这是一个重复的问题。我已经尝试了在这个网站上找到的一些其他解决方案，但没有找到我正在寻找的解决方案。例如，使用event.stopPropagation（）；，并且不能正确使用多个菜单我试图实现的是，当用户单击打开的下拉菜单之外的任何位置时，打开的菜单将关闭我喜欢javascript代码的工作方式，它实现了我想要的功能，但是我缺少输入window.onclick=function（event）{以适应我的代码结构所需的功能这是一个示例文件，我将其放在一起，以突出显示我试图实现的内容

我不认为这是一个重复的问题。我已经尝试了在这个网站上找到的一些其他解决方案，但没有找到我正在寻找的解决方案。例如，使用

event.stopPropagation（）；

，并且不能正确使用多个菜单

我试图实现的是，当用户单击打开的下拉菜单之外的任何位置时，打开的菜单将关闭

我喜欢javascript代码的工作方式，它实现了我想要的功能，但是我缺少输入

window.onclick=function（event）{

以适应我的代码结构所需的功能

这是一个示例文件，我将其放在一起，以突出显示我试图实现的内容

<!DOCTYPE html>
<html>

<head>
<style>

li > ul{display:none;}
.show {display:block;}
.sub-nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 0px;  
    list-style: none;
    position: relative;
}
.sub-nav ul:after {content: ""; clear: both; display: block;}
li {float: left;}
.sub-nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.sub-nav ul li:hover a {color: #fff;}
.sub-nav ul li a {
    display: block; 
    padding: 20px 40px;
    color: #757575; 
    text-decoration: none;
}
.sub-nav ul ul {
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
.sub-nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
.sub-nav ul ul li a {padding: 15px 40px; color: #fff;}
.sub-nav ul ul li a:hover {background: #4b545f;}

</style>
</head>

<body>

<!-- START: nav -->
<div class="sub-nav">
                <div class="container">

                    <ul>
                        <li class="active"><a href="#">ROOT 1</a></li>
                        <li><a href="#">ROOT 2</a></li>
                        <li><a href="#">ROOT 3</a></li>
                        <li><a href="#">ROOT 4</a></li>
                        <li><a href="#">ROOT 5</a></li>

                        <li id="drop-one"><a href="#">DROP 1</a>
                            <ul>
                                <li class="has-sub"><a href="#">SUB MENU 1</a></li>
                                <li class="has-sub"><a href="#">SUB MENU 2</a></li>
                                <li class="has-sub"><a href="#">SUB MENU 3</a></li>
                                <li class="has-sub"><a href="#">SUB MENU 4</a></li>
                            </ul>
                        </li>


                        <li id="drop-two"><a>DROP 2</a>
                            <ul>
                                <li class="has-sub"><a href="#">SUB MENU LONG TITLE 1</a></li>
                                <li class="has-sub"><a href="#">SUB MENU LONG TITLE 2</a></li>
                                <li class="has-sub"><a href="#">SUB MENU LONG TITLE 3</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
</div>
<!-- END: nav -->






</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    jQuery("li:has(ul)").click(function(){
        jQuery("ul",this).toggleClass("show");
    });


window.onclick = function(event) {
    if (!event.target.matches('??????')) {

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

</script>


li>ul{显示：无；}
.show{display:block；}
亚导航{
背景：#efef；
背景：线性梯度（顶部，#EF0%，#BBBB100%）；
背景：-莫兹线性梯度（顶部，#EFEF0%，#BBBB100%）；
背景：-webkit线性梯度（顶部，#EFEF0%，#BBBB100%）；
盒影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 20px；
边界半径：0px；
列表样式：无；
位置：相对位置；
}
.sub-nav ul:在{content:”；清除：两者；显示：块；}
li{float:左；}
.副导航ul li：悬停{
背景：#4b545f；
背景：线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-moz线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-webkit线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
}
.sub-nav ul li:悬停在{color:#fff；}
.副海军ul li a{
显示：块；
填充：20px 40px；
颜色：#7575；
文字装饰：无；
}
.副导航ul{
背景#5f6975；
边界半径：0px；
填充：0；
位置：绝对位置；
最高：100%；
}
.副海军ul li{
浮动：无；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
位置：相对位置；
}
.sub-nav ul ul li a{填充：15px 40px；颜色：#fff；}
.副导航ul li a:悬停{背景：#4b545f；}




















jQuery（“li:has（ul）”）。单击（function（）{
jQuery（“ul”，this）.toggleClass（“show”）；
});
window.onclick=函数（事件）{
如果（！event.target.matches（'？？？'））{
var dropdowns=document.getElementsByClassName（“？？？”）；
var i；
对于（i=0；i，此解决方案实现了所有需要的组件，并解决了出现的jQuery脚本错误
<!DOCTYPE html>
<html>

<head>

<style>

li > ul{display:none;}
.show {display:block;}
.sub-nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 0px;  
    list-style: none;
    position: relative;
}
.sub-nav ul:after {content: ""; clear: both; display: block;}
li {float: left;}
.sub-nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.sub-nav ul li:hover a {color: #fff;}
.sub-nav ul li a {
    display: block; 
    padding: 20px 40px;
    color: #757575; 
    text-decoration: none;
}
.sub-nav ul ul {
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
.sub-nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
.sub-nav ul ul li a {padding: 15px 40px; color: #fff;}
.sub-nav ul ul li a:hover {background: #4b545f;}

</style>

</head>

<body>

<!-- START: nav -->
<div class="sub-nav">
                <div class="container">

                    <ul>
                        <li class="active"><a href="#">ROOT 1</a></li>
                        <li><a href="#">ROOT 2</a></li>
                        <li><a href="#">ROOT 3</a></li>
                        <li><a href="#">ROOT 4</a></li>
                        <li><a href="#">ROOT 5</a></li>

                        <li class="dropdown"><a href="#">DROP 1</a>
                            <ul class="is-open">
                                <li><a href="#">SUB MENU 1</a></li>
                                <li><a href="#">SUB MENU 2</a></li>
                                <li><a href="#">SUB MENU 3</a></li>
                                <li><a href="#">SUB MENU 4</a></li>
                            </ul>
                        </li>


                        <li class="dropdown"><a href="#">DROP 2</a>
                            <ul class="is-open">
                                <li><a href="#">SUB MENU LONG TITLE 1</a></li>
                                <li><a href="#">SUB MENU LONG TITLE 2</a></li>
                                <li><a href="#">SUB MENU LONG TITLE 3</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
</div>
<!-- END: nav -->

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    // this is the function caller for click into drop down menu
$(document).ready(function(){
  $("li:has(ul)").click(function(){
    if ($(this).find(".is-open").is(":visible")) {
      $(".is-open").hide();
    } else {
      $(".is-open").hide();
      $(this).find(".is-open").toggle();
    }
  });
}); 
    //this script closes menu when clicked outside of drop down menu.
    $(document).on("click", function(event){
        var $triggerOn = $(".dropdown");
        if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
            $(".is-open").hide();
        }// END: if statement            
    });// END: .on  
</script>


li>ul{显示：无；}
.show{display:block；}
亚导航{
背景：#efef；
背景：线性梯度（顶部，#EF0%，#BBBB100%）；
背景：-莫兹线性梯度（顶部，#EFEF0%，#BBBB100%）；
背景：-webkit线性梯度（顶部，#EFEF0%，#BBBB100%）；
盒影：0px 0px 9px rgba（0,0,0,0.15）；
填充：0 20px；
边界半径：0px；
列表样式：无；
位置：相对位置；
}
.sub-nav ul:在{content:”；清除：两者；显示：块；}
li{float:左；}
.副导航ul li：悬停{
背景：#4b545f；
背景：线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-moz线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
背景：-webkit线性梯度（顶部，#4f5964 0%，#5f6975 40%）；
}
.sub-nav ul li:悬停在{color:#fff；}
.副海军ul li a{
显示：块；
填充：20px 40px；
颜色：#7575；
文字装饰：无；
}
.副导航ul{
背景#5f6975；
边界半径：0px；
填充：0；
位置：绝对位置；
最高：100%；
}
.副海军ul li{
浮动：无；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
位置：相对位置；
}
.sub-nav ul ul li a{填充：15px 40px；颜色：#fff；}
.副导航ul li a:悬停{背景：#4b545f；}






















//这是单击进入下拉菜单的函数调用者
$（文档）.ready（函数（）{
$（“li:has（ul）”）。单击（function（）{
如果（$（this）.find（“.is open”）.is（“：visible”））{
$（“.is open”）.hide（）；
}否则{
$（“.is open”）.hide（）；
$（this.find（“.is open”）.toggle（）；
}
});
}); 
//在下拉菜单外单击时，此脚本将关闭菜单。
$（文档）。在（“单击”）上，函数（事件）{
var$triggerOn=$（“。下拉列表
<li class="dropdown"><a href="#">DROP 1</a>
    <ul class="is-open">
        <li><a href="#">SUB MENU 1</a></li>
        <li><a href="#">SUB MENU 2</a></li>
        <li><a href="#">SUB MENU 3</a></li>
        <li><a href="#">SUB MENU 4</a></li>
    </ul>
</li>


<li class="dropdown"><a href="#">DROP 2</a>
    <ul class="is-open">
        <li><a href="#">SUB MENU LONG TITLE 1</a></li>
        <li><a href="#">SUB MENU LONG TITLE 2</a></li>
        <li><a href="#">SUB MENU LONG TITLE 3</a></li>
    </ul>
</li>

<script>


    // this is the function caller for click into drop down menu
    $(document).ready(function(){
        // this to function call targets the drop down menu by elements
        $("li:has(ul)").click(function(){
            // (IMPORTANT) code to hide existing open drop down menu before displaying new drop down menu 
            $(".is-open").hide();
            // code to toggle menu from drop down ROOT 
            $(this).find(".is-open").toggle();
        });// END: .click
    });// END: .ready

    //this script closes menu when clicked outside of drop down menu.
    $(document).on("click", function(event){
        var $triggerOn = $(".dropdown");
        if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
            $(".is-open").hide();
        }// END: if statement            
    });// END: .on  



</script>

<!DOCTYPE html>
<html>

<head>

<style>

li > ul{display:none;}
.show {display:block;}
.sub-nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 0px;  
    list-style: none;
    position: relative;
}
.sub-nav ul:after {content: ""; clear: both; display: block;}
li {float: left;}
.sub-nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.sub-nav ul li:hover a {color: #fff;}
.sub-nav ul li a {
    display: block; 
    padding: 20px 40px;
    color: #757575; 
    text-decoration: none;
}
.sub-nav ul ul {
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
.sub-nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
.sub-nav ul ul li a {padding: 15px 40px; color: #fff;}
.sub-nav ul ul li a:hover {background: #4b545f;}

</style>

</head>

<body>

<!-- START: nav -->
<div class="sub-nav">
                <div class="container">

                    <ul>
                        <li class="active"><a href="#">ROOT 1</a></li>
                        <li><a href="#">ROOT 2</a></li>
                        <li><a href="#">ROOT 3</a></li>
                        <li><a href="#">ROOT 4</a></li>
                        <li><a href="#">ROOT 5</a></li>

                        <li class="dropdown"><a href="#">DROP 1</a>
                            <ul class="is-open">
                                <li><a href="#">SUB MENU 1</a></li>
                                <li><a href="#">SUB MENU 2</a></li>
                                <li><a href="#">SUB MENU 3</a></li>
                                <li><a href="#">SUB MENU 4</a></li>
                            </ul>
                        </li>


                        <li class="dropdown"><a href="#">DROP 2</a>
                            <ul class="is-open">
                                <li><a href="#">SUB MENU LONG TITLE 1</a></li>
                                <li><a href="#">SUB MENU LONG TITLE 2</a></li>
                                <li><a href="#">SUB MENU LONG TITLE 3</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
</div>
<!-- END: nav -->

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    // this is the function caller for click into drop down menu
$(document).ready(function(){
  $("li:has(ul)").click(function(){
    if ($(this).find(".is-open").is(":visible")) {
      $(".is-open").hide();
    } else {
      $(".is-open").hide();
      $(this).find(".is-open").toggle();
    }
  });
}); 
    //this script closes menu when clicked outside of drop down menu.
    $(document).on("click", function(event){
        var $triggerOn = $(".dropdown");
        if($triggerOn !== event.target && !$triggerOn.has(event.target).length){
            $(".is-open").hide();
        }// END: if statement            
    });// END: .on  
</script>