$("#searchKey").keydown(function(event) {
var searchKey=$("#searchKey").val();
if (event.keyCode == 13 && searchKey!="") {
var i=0;
$("#roomTree > li > ul > li").each(function(idx,obja){ //成都
i=0;
if(i==0){
$(obja).css("display","none");
}
$(obja).find("> ul > li").each(function(idx,objb){ //区县
i=0;
if(i==0){
$(objb).css("display","none");
}
$(objb).find("> ul > li").each(function(idx,objc){ //局站
$(objc).css("display","none");
// console.log($(objc).children("a").children("cite").text().indexOf("张家"))
// console.log($(this).children("a").children("cite").html())
if($(objc).find(" > a > cite").text().indexOf(searchKey) >= 0){
$(obja).css("display","block");
$(objb).css("display","block");
$(objc).css("display","block");
i++;
}
});
});
});
//全部展开
$("#roomTree li ul").attr("class","layui-show");
$("#roomTree li ul").find("ul").each(function(idx,obj){
$(this).attr("class","layui-show");
});
}
if (event.keyCode == 13 && searchKey=="") {
$("#roomTree > li > ul ").find("li").each(function(idx,obja){
$(obja).css("display","block");
});
//不展开
$("#roomTree li ul").find("ul").each(function(idx,obj){
$(this).attr("class","");
});
}
});
注意：本文归作者所有，未经作者允许，不得转载

页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。模块加载名称：element
使用
元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。
网站设置
商品管理
订单管理
内容1
内容2
内容3
前提是你要加载element模块layui.use('element', function(){var element = layui.element;//一些事件监听element.on('tab(demo)', function(data){console.log(data);});});
预设元素属性
我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：
…
And So On
element模块支持的元素如下表：属性名可选值说明lay-filter任意字符事件过滤器(公用属性)，主要用于事件的精确匹配，跟选择器是比较类似的。
lay-allowClosetrue针对于Tab容器，是否允许选项卡关闭。默认不允许，即不用设置该属性
lay-separator任意分隔符针对于面包屑容器
基础方法
基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：方法名描述var element = layui.element;element模块的实例
返回的element变量为该实例的对象，携带一些用于元素操作的基础方法
element.on(filter, callback);用于元素的一些事件监听
element.tabAdd(filter, options);用于新增一个Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值(value)
参数options：设定可选值的对象，目前支持的选项如下述示例：element.tabAdd('demo', {title: '选项卡的标题',content: '选项卡的内容' //支持传入html,id: '选项卡标题的lay-id属性值'});
element.tabDelete(filter, layid);用于删除指定的Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值(value)
参数layid：选项卡标题列表的 属性 lay-id 的值element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项
element.tabChange(filter, layid);用于外部切换到指定的Tab项上，参数同上，如：
element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项
element.tab(options);用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)。该方法为 layui 2.1.6 新增
参数options：设定可选值的对象，目前支持的选项如下述示例：//HTML
标题1
标题2
标题3
内容1
内容2
内容4
//JavaScriptelement.tab({headerElem: '#tabHeader>li' //指定tab头元素项,bodyElem: '#tabBody>.xxx' //指定tab主体元素项});
element.progress(filter, percent);用于动态改变进度条百分比：
element.progress('demo', '30%');更新渲染
更新渲染
跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代
第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：参数(type)值描述tab重新对tab选项卡进行初始化渲染
nav重新对导航进行渲染
breadcrumb重新对面包屑进行渲染
progress重新对进度条进行渲染
collapse重新对折叠面板进行渲染element.init(); //更新全部2.1.6 可用 element.render() 方法替代element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增//……
第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。【HTML】
…
 
…
【JavaScript】//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增//……
事件监听
语法：element.on('event(过滤器值)', callback);
element模块在Layui事件机制中注册了element模块事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用element名。目前element模块所支持的事件如下表：event描述tab监听Tab选项卡切换事件
默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：
监听选项卡切换
Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：element.on('tab(filter)', function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器});
监听选项卡删除
Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：element.on('tabDelete(filter)', function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器});
注：该事件为 layui 2.1.6 新增监听导航菜单的点击
当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：element.on('nav(filter)', function(elem){console.log(elem); //得到当前点击的DOM对象});监听折叠面板
当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：element.on('collapse(filter)', function(data){console.log(data.show); //得到当前面板的展开状态，true或者falseconsole.log(data.title); //得到当前点击面板的标题区域DOM对象console.log(data.content); //得到当前点击面板的内容区域DOM对象});
动态操作进度条
你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：element.progress(filter, percent);。
如果你需要进度条更直观的例子，建议浏览：进度条演示页面
结语
事实上元素模块的大部分操作都是内部自动完成的，所以目前你发现他的接口很少呢。当然，我们也会不断增加element模块所支持的页面元素。
本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户参考了本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/15561.html

元素功能的开启只需要加载element模块即会自动完成，譬如tab选项卡切换、导航菜单滑动切换效果、面包屑导航、进度条等，使用这些小交互功能的前提就是：拥有符合这些小功能的所需正确的HTML结构，以及加载element模块；如下：tab选项卡的使用示例：
网站设置
商品管理
订单管理
内容1
内容2
内容3
加载element模块使得tab选项卡切换生效layui.use('element', function(){
var element = layui.element;
//一些事件监听
element.on('tab(demo)', function(data){
console.log(data);
});
});
通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：
…
..........
element模块支持的元素如下表：
属性名
可选值
说明
lay-filter
任意字符
事件过滤器(公用属性)，主要用于事件的精确匹配，跟选择器是比较类似的。
lay-allowClose
true
针对于Tab容器，是否允许选项卡关闭。默认不允许，即不用设置该属性
lay-separator
任意分隔符
针对于面包屑容器
基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：
方法名
描述
var element = layui.element;
element模块的实例
返回的element变量为该实例的对象，携带一些用于元素操作的基础方法
element.on(filter, callback);
用于元素的一些事件监听
element.tabAdd(filter, options);
用于新增一个Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值(value)
参数options：设定可选值的对象，目前支持的选项如下述示例：
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
,id: '选项卡标题的lay-id属性值'
});
element.tabDelete(filter, layid);
用于删除指定的Tab选项
参数filter：tab元素的 lay-filter="value" 过滤器的值(value)
参数layid：选项卡标题列表的 属性 lay-id 的值
element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项
element.tabChange(filter, layid);
用于外部切换到指定的Tab项上，参数同上，如：
element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项
element.tab(options);
用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)。该方法为 layui 2.1.6 新增
参数options：设定可选值的对象，目前支持的选项如下述示例：
//HTML
标题1
标题2
标题3
内容1
内容2
内容4
//JavaScript
element.tab({
headerElem: '#tabHeader>li' //指定tab头元素项
,bodyElem: '#tabBody>.xxx' //指定tab主体元素项
});
element.progress(filter, percent);
用于动态改变进度条百分比：
element.progress('demo', '30%');
跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代
第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：
参数(type)值
描述
tab
重新对tab选项卡进行初始化渲染
nav
重新对导航进行渲染
breadcrumb
重新对面包屑进行渲染
progress
重新对进度条进行渲染
collapse
重新对折叠面板进行渲染
element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
//……
第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。
【HTML】
…
…
【JavaScript】
//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
//……
语法：element.on('event(过滤器值)', callback);
element模块在Layui事件机制中注册了element模块事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用element名。目前element模块所支持的事件如下表：
event
描述
tab
监听Tab选项卡切换事件
默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：
element.on('tab(test)', function(data){
console.log(data);
});
Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：
element.on('tab(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：
element.on('tabDelete(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
注：该事件为 layui 2.1.6 新增
当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：
element.on('nav(filter)', function(elem){
console.log(elem); //得到当前点击的DOM对象
});
当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：
element.on('collapse(filter)', function(data){
console.log(data.show); //得到当前面板的展开状态，true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：element.progress(filter, percent);。
上述是一个已经设置了过滤器(lay-filter="demo")的进度条
现在你只需要在某个事件或者语句中执行方法：element.progress('demo', '50%');
即可改变进度

先来个发生错误的截图：

弹窗被遮罩遮住，无法操作，弹窗代码如下

<script>
function dialog(){
    layer.open({
		  	type: 1,
		  	title: "请选择",
		  	//area: ['520px', '395px'],
		  	shadeClose: true,
		  	//skin: 'yourclass',
		  	content: $("#dialog"),
	   		btn: ['确定','取消'],  		
		   	yes: function(index, layero){
		    	layer.msg("确定", {icon: 1});
		  	}
		  	,btn2: function(index, layero){
		    	layer.msg("取消");
		    
		    	//return false 开启该代码可禁止点击该按钮关闭
		  	}
		  	,cancel: function(){ 
		    	//右上角关闭回调
		    	layer.msg("取消2");
		    	//return false 开启该代码可禁止点击该按钮关闭
		  	}
		});
    }                                        
</script>

<div id="dialog">
	<form class="layui-form" action="" >
		<div class="layui-form-item" pane="">
 			<label class="layui-form-label">原始复选框</label>
 			<div class="layui-input-block">
    			<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
    			<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
    			<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
  			</div>
		</div>
	</form>
</div>



看了官方说法是由于body样式影响，我在这个页面不是放在body里面的，但是由于用的是layui单页版，每个页面都是套在主页面里面的，所以还是在body里面。

将layui open 里面再加一个方法：

success:function(layero){

             var mask = $(".layui-layer-shade");

             mask.appendTo(layero.parent());

             //其中：layero是弹层的DOM对象

  },

目的是将 弹层的遮罩DOM元素和弹层元素设置在同一层，

具体代码如下：

layer.open({

              type: 1,

              title: "请选择",

              shadeClose: true,

              content: $("#dialog"),

               btn: ['确定','取消'],

               success:function(layero){

                   var mask = $(".layui-layer-shade");

                   mask.appendTo(layero.parent());

                  //其中：layero是弹层的DOM对象

             },        

               yes: function(index, layero){

                layer.msg("确定", {icon: 1});

              }

              ,btn2: function(index, layero){

                   layer.msg("取消");

                   //return false 开启该代码可禁止点击该按钮关闭

              }

              ,cancel: function(){ 

                    //右上角关闭回调

                    layer.msg("取消2");

                    //return false 开启该代码可禁止点击该按钮关闭

              }

        });

 

                                                                            仅做记录用，如有雷同，不甚荣幸