JS功能，以除去两个不同的类与一个干扰另一个

我有两个JS功能：JS功能，以除去两个不同的类与一个干扰另一个

function myFunctionMenu() { 
    document.getElementById("main-menu").classList.toggle("shows"); 
}

和

function expandFunction() { 
    document.getElementById("menu-button").classList.toggle("expand"); 
}

这两者进行切换的类。这几类风格：

.shows { 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
    transition: all 2s ease; 
}

和

.expand { 
    padding: 1% 20%; 
    background-color: #8c8c8c; 
}

然后我有两个功能，一是为每个那些原有的功能，点击发起两个功能按钮之外时将删除类：

window.onclick = function(event) { 
    if (!event.target.matches('#menu-button')) { 

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

和

window.onclick = function(event) { 
    if (!event.target.matches('#menu-button')) { 

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

的HTML如下，以防万一：

<!doctype html> 
 

 
<head> 
 

 
    <title>Site Photos</title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="Styles/new-menu.css"> 
 
    <script type="text/javascript" src="script/menu-scripts.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <br> 
 
    <h1> 
 
\t Name <br> 
 
    </h1> 
 
    <h2> 
 
\t Site Photos 
 
    </h2> 
 

 
    <!--Menu--> 
 
    <div class="menu-container" div style="margin-left:auto; margin right:auto; margin-top:5%; margin-bottom:auto; width:40%;"> 
 
\t 
 
    <!-- Main Menu Button --> 
 
    <div id="main-button-container" style="text-align:center; margin-top:-8%;"> 
 
    <button onclick="myFunctionMenu();expandFunction()" class="dropbtn" id="menu-button"> Menu </button> 
 
    </div> 
 
\t 
 
<hr> 
 
<!-- Main Menu Container --> 
 
\t <div id="main-menu" class="house-menu"> 
 
\t \t <a href="main-house.html"> Main House </a><hr> 
 
\t \t <a href="car-barn-main.html"> Car Barn </a><hr> 
 
\t \t <a href="utility-building.html"> Utility Building </a><hr> 
 
\t \t <a href="under-construction.html"> Central Plant </a><hr> 
 
\t \t <a href="exteriors-and-siteworks.html">Exteriors</a><hr> 
 
\t </div> 
 
<hr> 
 
\t 
 
    </div> 
 
</body> 
 
</html> \t

我遇到的问题是，我只能运行两个中的一个“删除时，点击该按钮外部”在功能时间。

任何人都可以向我解释为什么？

谢谢。

来源

2017-08-16 Jason Vickers adVANture_time

想想看，每次你做一次'window.onclick = ...'你分配一个新的价值，有效覆盖什么之前在那里。 – adeneo

@adeneo：_））我只是准备一个答案：_））你不应该分配两个值的onclick窗加做到这一点： '' – Hossein

它不是这个问题的重复。我的按钮调用了两个都可以工作的功能。 –

由于第一个window.onclick将被第二个覆盖。就像写作var a = 1;及其后的var a = 2;一样。您应该使用document.addEventListener用于此目的：

document.addEventListener("click", function(e){ 
    if (!e.target.matches('#menu-button')) { 
    var dropdowns = document.getElementsByClassName("house-menu"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('shows')) { 
     openDropdown.classList.remove('shows'); 
     } 
    } 
    } 
});

和

document.addEventListener("click", function(e){ 
    if (!e.target.matches('#menu-button')) { 

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

来源

2017-08-16 22:00:30 Jonathan

这是我正在寻找的答案。 –

JS功能，以除去两个不同的类与一个干扰另一个

回答

相关问题