我正在用这个 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;
}
我知道这远非需要做的,但它是我所拥有的最接近的..