简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下:
如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单。这里有两个点,实现展现和隐藏用display="block"和display="none",另外就是要做一个判断,if else的判断当前是block还是none。
Document #sub_menu_1,#sub_menu_2{ display:none; } ulli:hover{ cursor:pointer; }
一级菜单1 - 二级餐单1
- 二级餐单1
- 二级餐单1
- 二级餐单1
一级菜单2 二级菜单2 二级菜单2 二级菜单2 二级菜单2 一级餐单3 functionf(str){ varsub_menu=document.getElementById(str); vardis_v=sub_menu.style.display; if(dis_v=="block") sub_menu.style.display="none"; else sub_menu.style.display="block"; }