在制作zblog模板或者其它模板的时候,经常会用到点击下拉菜单,比如手机端菜单,或者PC端搜索图标点击显示搜索框!
如果使用css去写下拉也可以,但在手机端不是很适用,目前css点击展开后再次点击不能正常收回。
所以推荐下方的JS代码,即插即用,比较简单,特效可以用css3写。
模板代码:
<div class="nav"> <span class="mnav"><a onclick="Show_Hidden(tr1)"></a></span> /* tr1 */ <ul class="layui-nav" id="tr1">/*id tr1*/ {module:navbar} </ul> </div>
javascript:
//javascript代码: function Show_Hidden(trid){ if(trid.style.display=="block"){ trid.style.display='none'; }else{ trid.style.display='block'; } }
注意: 如果点击后才显示,请记得事先写入css隐藏!