[英]Expanding menu/sub menu
我正在用此HTML制作菜單。
<div class="sidemenu-maincat">
<img src="folder/maincat1.jpg" alt="Main cat1" id="toggle" />
</div>
<div class="sidemenu-subcat">
<a href="submenu11.html"> - Submenu 11 </a>
</div>
<div class="sidemenu-subcat">
<a href="submenu12.html"> - Submenu 12 </a>
</div>
<div class="sidemenu-subcat">
<a href="submenu13.html"> - Submenu 13 </a>
</div>
<div class="sidemenu-maincat">
<img src="folder/main-cat2.jpg" alt="Main cat2 />
</div>
<div class="sidemenu-subcat">
<a href="submenu21.html"> > Submenu 21 </a>
</div>
<div class="sidemenu-subcat">
<a href="submenu22.html"> > Submenu 22 </a>
</div>
<div class="sidemenu-subcat">
<a href="submenu23.html"> > Submenu 23 </a>
</div>
我隱藏了“ sidemenu-subcat” div,在按“ sidemenu-maincat” div中的圖片時,我希望它顯示/隱藏。 我試圖用Javascript做到這一點,但我根本不知道怎么做。 我希望不要對任何庫都這樣做。
我將所有Javascript都保存在另一個文檔中,這是我用來解決問題的最接近的方法:
function toggling()
{
if(document.getElementByClassName("hidden").style.display == "none")
{
document.getElementByClassName("hidden") = "block";
}
else
{
document.getElementByClassName("hidden") = "none";
}
}
function init()
{
var toggle = document.getElementsByClassName("toggle");
toggle.onclick = toggling;
}
我知道這與需要完成的工作相去甚遠,但這是我所擁有的最接近的。
好吧,我確實喜歡使用庫來處理這類事情,但我為您整理了一個純JavaScript示例。 盡管可能有更好的方法。
首先,每個子菜單都應包含在它的maincat div中,並提供一個隱藏的類,以便在頁面加載時將其隱藏。
.sidemenu-subcat.hidden {
display: none;
}
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 the element is not visible it's offsets will be 0
if (subItem.offsetWidth === 0 && subItem.offsetHeight === 0) {
subItem.className = 'sidemenu-subcat';
} else {
subItem.className = subItem.className + ' hidden';
}
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.