小菜鸟们冲鸭！！
由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！
一、问题描述
由于是小菜鸟，所用最开始只会用普通的css按钮，然后通过onclick事件来控制div的显隐，但是“师傅”却要求用layui的按钮，当时只会把按钮替换成layui的开关按钮，但是却不知道怎么去控制它让div显隐，通过查找了很多资料，终于这个问题解决啦，于是把代码放上来，希望能给同样是小菜鸟的大家带去一定的帮助！
二、解决办法
1.首先要应用layui的样式，那么就要在你文件的顶部引用layui和jquery的相关文件（可以通过layui和jquery的官网去下载相关的文件，然后引入到你的项目中）。
<link rel="stylesheet" href="//res.layui/layui/dist/css/layui.css" media="all">
<script src="//res.layui/layui/dist/layui.js" charset="utf-8"></script>
<script src="https://code.jquery/jquery-3.1.1.min.js"></script>（我这里都是引用的官方的地址，最好改成你本地的对应文件所在的地方！！！）
2.写一个layui的开关按钮，由于layui的开关按钮是在表单里面，所以要应用表单。
<form class="layui-form" action="" lay-filter="form-switch-project" >
<div class="layui-form-item">
<div class="layui-input-block" id="project-switch" style="margin: -31px 0 0 85%">
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest-project" lay-text="ON|OFF" value="项目显示开关" checked="">
</div>
</div>
</form>（lay-filter是layui的事件过滤器，可以随意命名，具体可以去官方文档查看——https://www.layui/doc/modules/form.html#on——。其中的id或者value什么的可以自己随意命名，但是记得要和后面的script里面的内容一致。）
3.定义一个div是你想要隐藏、显示的地方。
<div class="layui-form-item project-hide" style="width:200px;height:200px;background:#7ee6dc">
小菜鸟们冲鸭！
</div>4.在script里面写入类似于js的控制发方法。
<script>
layui.use('form', function () {
var form = layui.form;
form.on('switch(switchTest-project)', function (data) {
if ($('#project-switch input[name="open"]:checked ').val() == "项目显示开关") {
$(".project-hide").slideDown();
} else {
$(".project-hide").slideUp();
}
form.render( 'checkbox','form-switch-project ');
});
});
</script>5.这是全部的代码，大家可以去这个地方把代码复制进去——https://www.runoob/runcode——测试一下。
<html>
<link rel="stylesheet" href="//res.layui/layui/dist/css/layui.css" media="all">
<script src="//res.layui/layui/dist/layui.js" charset="utf-8"></script>
<script src="https://code.jquery/jquery-3.1.1.min.js"></script>
<body>
<form class="layui-form" action="" lay-filter="form-switch-project" >
<div class="layui-form-item">
<div class="layui-input-block" id="project-switch" >
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest-project" lay-text="ON|OFF" value="项目显示开关" checked="">
</div>
</div>
</form>
<div class="layui-form-item project-hide" style="width:200px;height:200px;background:#7ee6dc">
小菜鸟们冲鸭！
</div>
<script>
layui.use('form', function () {
var form = layui.form;
form.on('switch(switchTest-project)', function (data) {
if ($('#project-switch input[name="open"]:checked ').val() == "项目显示开关") {
$(".project-hide").slideDown();
} else {
$(".project-hide").slideUp();
}
form.render( 'checkbox','form-switch-project ');
});
});
</script>
</body>
</html>6.如果大家想多几个按钮控制不同的div的话，只需要给他们设置不同的名称就好，然后更改对应的地方。
又是收获满满的一周，冲鸭！
更多推荐
layui如何通过开关按钮实现div的隐藏于显现,展开时拥有动画效果（小菜鸟入门小白教程）
发布评论