Question

下面的代码有两个下拉菜单，用于在点击按钮时加载容器，并在点击页面上的任何位置时关闭下拉菜单。尽管窗口加载有效，但内部页面显然需要加载太多时间才能加载到本地服务器上，因为我的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>

Answer 1

您的javascript代码没有任何内在错误或缓慢。您是否尝试过检查PHP代码的运行时间？因为那是我开始寻找问题的地方。

Answer 2

你的下拉菜单没有任何问题。他们工作正常。但他们缺乏设计，而且对于这种小型控制，代码看起来太过分了。我建议你使用 Bootstrap 。 CSS和Javascript代码是外部代码，您只需要通过编写一些HTML来将下拉列表放在项目中。

有几种不同的设计及其工作方式比您编码的方式更简单。请查看以下示例和this page以获取有关它的更多信息：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Bootstrap Dropdown Example</h2>
  <p>Nice design, easy usage, good performance.</p>
  <p><b>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</b></p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">THIS</a></li>
      <li><a href="#">IS</a></li>
      <li><a href="#">A DROPDOWN</a></li>
    </ul>
  </div>
</div>

</body>
</html>

＆＃13;

改进下拉菜单的JavaScript代码

2 个答案: