虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟超过100 KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下:
如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单。这里有两个点,实现展现和隐藏用显示=翱椤焙拖允?懊挥小?另外就是要做一个判断,if ,其他的判断当前是块还是没有。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;风格类型=" text/css "比;
# sub_menu_1, # sub_menu_2 {
显示:没有;
}
ul李:{徘徊
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul>
& lt; li>
& lt; li>二级餐单1 & lt;/li>
& lt; li>二级餐单1 & lt;/li>
& lt; li>二级餐单1 & lt;/li>
& lt; li>二级餐单1 & lt;/li>
& lt;/ul>
& lt;/li>
& lt; li>一级菜单2
& lt; ul id=皊ub_menu_2”比;
& lt; li>二级菜单2 & lt;/li>
& lt; li>二级菜单2 & lt;/li>
& lt; li>二级菜单2 & lt;/li>
& lt; li>二级菜单2 & lt;/li>
& lt;/ul>
& lt;/li>
& lt; li>一级餐单3 & lt;/li>
& lt;/ul>
& lt;脚本type=" text/javascript祝辞
函数f (str) {
var sub_menu=. getelementbyid (str);
var dis_v=sub_menu.style.display;
如果(dis_v==翱椤?
sub_menu.style。显示=懊挥小?
其他的
sub_menu.style。显示=翱椤?
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
有个注意事项就是一级菜单的李不能添加一个标签,不然会不起作用。
如果,你的页面默认进来二级菜单是展现的,点击时才关闭。直接把风格标签的样式显示=懊挥小比サ艟涂梢浴Ｍ毙枰薷囊幌耲s。
& lt;脚本type=" text/javascript祝辞
函数f (str) {
var sub_menu=. getelementbyid (str);
var dis_v=sub_menu.style.display;
如果(dis_v==懊挥小?
sub_menu.style。显示=翱椤?
其他的
sub_menu.style。显示=懊挥小?
}
& lt;/script>
之前
仔细看,不然你就会发现你需要点击两次才会出现想要的效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
