我有一个用 javascript 制作的下拉菜单,但它在 IE 中不起作用,而在 Firefox 和 Chrome 中运行良好。我正在使用的 HTML 代码是这样的:
<div id="sidemeny-container">
<div class="sidemenu-maincat">
<img src="cat1.jpg" alt="cat1" />
<div class="sidemenu-subcat hidden">
<a href="subcat1.html"> - Subcat 1 </a>
</div>
<div class="sidemenu-subcat hidden">
<a href="subcat2.html"> - Subcat 2 </a>
</div>
<div class="sidemenu-subcat hidden">
<a href="subcat3.html"> - Subcat 3 </a>
</div>
</div>
<div class="sidemenu-maincat">
<img src="cat2.jpg" alt="cat2" />
<div class="sidemenu-subcat hidden">
<a href="subcat2-1.html"> - Subcat 2-1 </a>
</div>
<div class="sidemenu-subcat hidden">
<a href="subcat2-2.html"> - Subcat 2-2 </a>
</div>
<div class="sidemenu-subcat hidden">
<a href="subcat2-3.html"> - Subcat 2-3 </a>
</div>
</div>
</div>
CSS 代码:
#sidemeny-container {
border-bottom:1px #000 solid;
height: auto;
width: 153px;
float:left;
padding: 10px 0px 0px 0px;
}
.sidemenu-maincat {
border-top: 1px #000 solid;
border-right: 1px #000000 solid;
width:148px;
height:auto;
float:left;
padding: 0px 0px 0px 5px;
}
.sidemenu-subcat.hidden {
display:none;
width:148px;
height:auto;
float:left;
padding: 0px 0px 0px 15px;
}
和 javascript
function initiate()
{
var sideMenuOptions = document.getElementsByClassName('sidemenu-maincat');
for (var i = 0; i < sideMenuOptions.length; i++) {
sideMenuOptions[i].addEventListener('click', function() {
var subMenuItems = this.getElementsByClassName('sidemenu-subcat');
for (var s = 0; s < subMenuItems.length; s++) {
var subItem = subMenuItems[s];
if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
subItem.className = 'sidemenu-subcat';
} else {
subItem.className = subItem.className + ' hidden';
}
}
});
}
}
window.onload = initiate;
我不明白为什么这在 IE 中不起作用,因为它在其他浏览器中运行良好。而且我更喜欢将我所有的 javascript 保存在我的单独文档 javascript.js 中,并且我不想使用库。