小菜鸟们冲鸭！！

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

一、问题描述

由于是小菜鸟，所用最开始只会用普通的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>

（我这里都是引用的官方的地址，最好改成你本地的对应文件所在的地方！！！）

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.com/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.com/runcode——测试一下。

<html>
<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>
<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的隐藏于显现，展开时拥有动画效果（小菜鸟入门小白教程）相关推荐

jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
jquery如何判断div是否隐藏
2019独角兽企业重金招聘Python工程师标准>>> 应用场景我们在项目中通过会判断某个div是否隐藏,然后执行某一个函数,或者进行一个操作,其实判断div是否隐藏的方法很简单. ...
点击切换div 的隐藏与显示
点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码
放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn body { background: #fff; font-family: "Lucida Grande", ...
html div初始隐藏点击可见_3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载...
这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计.这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果. 使用方法 H ...
html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果
本文介绍CSS3实现DIV图层隐藏到显示的过渡效果,可用于产品列表的产品简介过渡显示与隐藏等,希望对你有所帮助. CSS3的transition过渡属性对于页面元素的显隐并没有提供过渡方法!所以DIV ...
jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class=&qu ...
java单击切换div_[Java教程]点击同一按钮实现div的隐藏与现实切换
[Java教程]点击同一按钮实现div的隐藏与现实切换 0 2016-01-16 21:00:12 点击同一按钮实现div的隐藏与现实切换: 在很多应用中,都有这样的功能,点击同一个按钮可以实现div ...

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

小菜鸟们冲鸭！！

一、问题描述

二、解决办法

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

最新文章

热门文章