layui如何通过开关按钮实现div的隐藏于显现，展开时拥有动画效果（小菜鸟入门小白教程）

最新推荐文章于 2025-01-02 14:49:38 发布

one一piece

最新推荐文章于 2025-01-02 14:49:38 发布

阅读量8.1k

点赞数 2

本文链接：https://blog.youkuaiyun.com/H_ONE_PIECE/article/details/100068563

版权

本文是小菜鸟分享如何使用layui的开关按钮实现div的隐藏和显现，并带有动画效果。教程包括引用layui和jquery文件，创建layui开关按钮，定义div，以及编写js控制方法。详细步骤和代码示例可供初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小菜鸟们冲鸭！！

由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！

一、问题描述

由于是小菜鸟，所用最开始只会用普通的css按钮，然后通过onclick事件来控制div的显隐，但是“师傅”却要求用layui的按钮，当时只会把按钮替换成layui的开关按钮，但是却不知道怎么去控制它让div显隐，通过查找了很多资料，终于这个问题解决啦，于是把代码放上来，希望能给同样是小菜鸟的大家带去一定的帮助！

二、解决办法

1.首先要应用layui的样式，那么就要在你文件的顶部引用layui和jquery的相关文件（可以通过layui和jquery的官网去下载相关的文件，然后引入到你的项目中）。

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>