展開/折疊菜單根本不起作用
[英]Expand/Collapse Menu not working at all
問題描述
我正在嘗試使用javascript創建擴展/折疊菜單。 這樣的結構。
.menu
.subItem
.subItem
這是CSS的一部分
ul.menu {
display: none
}
但是菜單項不能從折疊中展開
這個js文件
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
當我打開chrome開發人員工具時，我已經意識到，一旦點擊菜單，就會指出這一行
var thisMenu = document.getElementById(thisMenuName).style;
又一次又出了什么問題
@Edit：我忘記添加html文件
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
a
</head>
<body>
<div>
<a href="" class="menuLink">trajedi</a>
<ul class="menu" id="menu1">
<li><a href="">deneme</a></li>
<li><a href="">deneme</a></li>
</ul>
</div>
1 個解決方案
解決方案1
3 已采納 2018-08-23 14:50:12
我不知道您試圖對togle函數中的substring部分做什么。 那是您的代碼的唯一問題。 更改行：
var thisMenu = document.getElementById(thisMenuName).style;
至
var thisMenu = document.getElementById('menu1').style;
它會工作。 看一看：
window.onload = initAll; function initAll() { var allLink = document.getElementsByTagName("a"); for (var i = 0; i < allLink.length; i++) { if (allLink[i].className.indexOf("menuLink") > -1) { allLink[i].onclick = togle; } } } function togle(e) { // can't understand the use of the 3 lines below: var startMenu = this.href.lastIndexOf("/") + 1; var stopMenu = this.href.lastIndexOf("."); var thisMenuName = this.href.substring(startMenu, stopMenu); var thisMenu = document.getElementById('menu1').style; if (thisMenu.display == "block") { thisMenu.display = "none"; } else { thisMenu.display = "block"; } return false; }
ul.menu { display: none }
<div> <a href="" class="menuLink">trajedi</a> <ul class="menu" id="menu1"> <li><a href="">deneme</a></li> <li><a href="">deneme</a></li> </ul> </div>
您的代碼的簡單得多，更現代的版本是：
function initAll() { Array.from(document.getElementsByTagName("a")) .filter((link)=>link.className.indexOf("menuLink") > -1) .forEach((link)=>link.onclick = ()=>{ var thisMenu = document.getElementById('menu1').style; thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block'; return false; }); } window.onload = initAll;
ul.menu { display: none }
<div> <a href="" class="menuLink">trajedi</a> <ul class="menu" id="menu1"> <li><a href="">deneme</a></li> <li><a href="">deneme</a></li> </ul> </div>
jQuery展開和折疊菜單不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.