小菜鸟们冲鸭!!
由于本人是个小菜鸟,刚起步,所以写下遇到的点点滴滴,希望能给同是小菜鸟的大家带去一定的帮助吧!
一、问题描述
由于是小菜鸟,所用最开始只会用普通的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的隐藏于显现,展开时拥有动画效果(小菜鸟入门小白教程)
发布评论