0
下面的代码有两个下拉菜单，它们在点击按钮时加载容器，在点击页面上的任意位置时关闭下拉菜单。虽然窗口加载工作，但页面内部需要太多的时间加载本地服务器，显然是因为我的JavaScript代码不是它应该的方式。所以，我应该怎么样的JavaScript代码，以便它正确加载页面，同时关闭下拉单击页面上的任何地方[如果两个下拉打开都应该关闭点击就像片段]。改善下拉菜单的JavaScript代码
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
$("#notificationContainer").load("notifications.php");
document.getElementById("myDropdown").classList.remove("show");
$("#scoreContainer").load("score.php");
document.getElementById("myDropdown2").classList.remove("show");
}.dropdown,
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content,
.dropdown-content2 {
display: none;
background-color: #fff;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0;
}
.dropdown-content a,
.dropdown-content2 a {
padding: 10px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
.dropbtn {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: red;
}
.dropbtn2 {
height: 25px;
width: 50px;
border: none;
background-color: white;
background: green;
}
.dropdown-content,
.dropdown-content2 {
border: 2px solid #c6c6c6;
border-top: none;
}
#notificationContainer,
#scoreContainer {
min-width: 400px;
min-height: 100px;
border: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td style="padding-right:15px;">
<a href="home.php" class="hombtn"></a>
</td>
<td style="padding-right:15px;">
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">one</button>
<div id="myDropdown2" class="dropdown-content2">
<div id="scoreContainer"></div>
</div>
</div>
</td>
<td style="padding-right:15px;">
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">two</button>
<div id="myDropdown" class="dropdown-content">
<div id="notificationContainer"></div>
</div>
</div>
</td>
</tr>
</table>以上的JavaScript从下面单下拉菜单代码，加载页面内容器立即修改，但我的修改[上述]版本需要太多的时间：
<script type="text/javascript">
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
$("#notificationContainer").load("notifications.php");
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');
}
}
}
}
</script>