首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

Posted in Javascript onAugust 17, 2016

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

先上代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用车管理</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">admin,欢迎您</div>
<div id="div_leftmenu" class="easyui-accordion">
</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '';
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
$("#div_leftmenu").html(div_leftmenu_html);
});
</script>
</body>
</html>

结果：

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

接下来不断尝试

一：usertype = "1";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

二：usertype = "2";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

三：usertype = "3";

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

四：

//导航菜单绑定初始化
$(".easyui-accordion").accordion();

结果：没效果

五：修改后的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用车管理</title>
<link href="../JQuery/easyui/themes/icon.css" rel="stylesheet" />
<link href="../JQuery/easyui/themes/default/easyui.css" rel="stylesheet" />
<script src="../JQuery/jquery.min.js"></script>
<script src="../JQuery/easyui/jquery.easyui.min.js"></script>
<script src="../JQuery/easyui/locale/easyui-lang-zh_CN.js"></script>
<style>
#div_left {
width: 250px;
background-color: powderblue;
font-size: inherit;
}
#div_welcome {
margin: 15px 0 15px 0;
text-align: center;
}
#div_leftmenu div {
font-size: 15px;
}
#div_leftmenu div ul {
margin: 15px 15px 15px 15px;
padding: 0;
overflow: hidden;
line-height: 40px;
max-height: 200px;
}
#div_leftmenu div ul li {
list-style-type: none;
background-color: #DFE2E3;
text-align: center;
margin-bottom: 15px;
}
#div_leftmenu div ul li:hover{
list-style-type: none;
background-color: powderblue;
text-align: center;
margin-bottom: 15px;
cursor:pointer;
}
#div_leftmenu div ul li:last-of-type {
margin-bottom: 0;
}
</style>
</head>
<body class="easyui-layout" style="font-size: 15px;" data-options="fit:true">
<form id="form1" runat="server">
<!--左侧-->
<div id="div_left" data-options="region:'west',title:' '">
<div id="div_welcome">车辆管理员1,欢迎您</div>
</div>
<!--右侧-->
<div data-options="region:'center',title:' '" style="padding: 5px;">
</div>
</form>
<script type="text/javascript">
var usertype = "0";
$(document).ready(function () {
var div_leftmenu_html = '<div id="div_leftmenu" class="easyui-accordion">';//
switch (usertype) {
case "0"://车辆管理员
div_leftmenu_html += '<div title="车辆登记">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>车辆登记</li>';
div_leftmenu_html += ' <li>添加</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车分派">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车分派</li>';
div_leftmenu_html += ' <li>分派</li>';
div_leftmenu_html += ' <li>详情</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="审核人管理">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>审核人管理</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "1"://学校领导
div_leftmenu_html += '<div title="用车审批">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车审批</li>';
div_leftmenu_html += ' <li>审批</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "2"://司机
div_leftmenu_html += '<div title="司机确认">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>司机确认</li>';
div_leftmenu_html += ' <li>确认</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
case "3"://普通教师
div_leftmenu_html += '<div title="用车申请">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>用车申请</li>';
div_leftmenu_html += ' <li>申请</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
div_leftmenu_html += '<div title="通知">';
div_leftmenu_html += ' <ul>';
div_leftmenu_html += ' <li>通知</li>';
div_leftmenu_html += ' </ul>';
div_leftmenu_html += '</div>';
break;
default:
break;
}
div_leftmenu_html += '</div>';
$("#div_left").append(div_leftmenu_html);
//导航菜单绑定初始化
$(".easyui-accordion").accordion();
});
</script>
</body>
</html>

结果：

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

手风琴加载出来了。

以上所述是小编给大家介绍的jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

- Author -

zhyue93

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
网站页面自动跳转实现方法PHP、JSP（上）
Aug 01 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
关于Vue中的options选项
Mar 22 Vue.js
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 #Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 #Javascript
在javascript中使用com组件的简单实现方法
Aug 17 #Javascript
指针(1) 微信小程序(9) 切片(1) vue-esign(1) WeUI(1) Pillow(2) Slice(1) 结构体(1) random(1) map(4)
You might like
一个ubbcode的函数，速度很快.
2006/10/09 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php多任务程序实例解析
2014/07/19 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php程序内部post数据的方法
2015/03/31 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js实现拖拽效果
2015/02/12 Javascript
两种JavaScript的AES加密方式（可与Java相互加解密）
2016/08/02 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
[00:19]CN DOTA NEVER DIE！VG夺冠rOtK接受采访
2019/12/23 DOTA
pygame学习笔记（1）：矩形、圆型画图实例
2015/04/15 Python
介绍Python中的__future__模块
2015/04/27 Python
Python可变参数函数用法实例
2015/07/07 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python中模块string.py详解
2017/03/12 Python
python实现多层感知器
2019/01/18 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python如何发送与接收大型数组
2020/08/07 Python
如何真正的了解python装饰器
2020/08/14 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
肯尼亚网上商城：Kilimall
2016/08/20 全球购物
香港钟表珠宝首饰商城：OneMallTime网摩间
2016/10/14 全球购物
贝玲妃英国官网：Benefit英国
2018/02/03 全球购物
P D PAOLA意大利官网：西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
法国体育用品商店：GO Sport
2019/10/23 全球购物
要账委托书范本
2014/09/15 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript