当先锋百科网

首页 1 2 3 4 5 6 7

点击下拉菜单js.png

在制作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隐藏!