位置：广州松河 > 技术支持 > 即插即用点击下拉菜单 javascript_js/jQuery

即插即用点击下拉菜单 javascript_js/jQuery

来源：网络整理时间：2023/3/4 0:56:10 共 3668 浏览

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery：即插即用返回顶部 _js/jQuery | ·下一条：table 表格边框css_CSS学习

即插即用 点击 下拉菜单 javascript_js/jQuery

即插即用点击下拉菜单 javascript_js/jQuery