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功能，以除去兩個不同的類與一個干擾另一個

回答

相關問題