改进下拉菜单的JavaScript代码
[英]Improve javascript code for drop down menu
问题描述
下面的代码有两个下拉菜单，它们在单击按钮时加载容器，而在单击页面上的任何位置时，下拉菜单均会关闭。 虽然可以执行窗口加载，但是即使在本地服务器上，内部页面也需要花费太多时间来加载，这显然是因为我的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>
2 个解决方案
解决方案1
0 2016-03-12 14:30:19
您的JavaScript代码本质上没有错误或运行缓慢。 您是否尝试检查过PHP代码运行了多长时间？ 因为那是我开始寻找问题的地方。
解决方案2
0 2016-03-14 09:25:55
您的下拉菜单没有错。 他们工作正常。 但是它们缺乏设计，对于这么小的控件，代码看起来太多了。 我建议您使用Bootstrap 。 CSS和Javascript代码是外部的，您只需通过对HTML进行编码就可以将下拉列表放入项目中。
有几种不同的设计及其工作方式比您编写的代码更简单。 请看以下示例和此页面 ，以获取有关此示例的更多信息：
<!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>
改进下拉菜单的代码（HTML / CSS / JavaScript）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.