在上篇文章給大家介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
先上代碼：
<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"><!--左側(cè)--><div id="div_left" data-options="region:'west',title:' '"><div id="div_welcome">admin,歡迎您</div><div id="div_leftmenu" class="easyui-accordion"></div></div><!--右側(cè)--><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"://學(xué)校領(lǐng)導(dǎo)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"://司機(jī)div_leftmenu_html += '<div title="司機(jī)確認(rèn)">';div_leftmenu_html += ' <ul>';div_leftmenu_html += ' <li>司機(jī)確認(rèn)</li>';div_leftmenu_html += ' <li>確認(rèn)</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>結(jié)果：
接下來不斷嘗試
一：usertype = "1";
二：usertype = "2";
三：usertype = "3";
四：
//導(dǎo)航菜單綁定初始化$(".easyui-accordion").accordion();結(jié)果：沒效果
五：修改后的代碼如下
<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"><!--左側(cè)--><div id="div_left" data-options="region:'west',title:' '"><div id="div_welcome">車輛管理員1,歡迎您</div></div><!--右側(cè)--><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"://學(xué)校領(lǐng)導(dǎo)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"://司機(jī)div_leftmenu_html += '<div title="司機(jī)確認(rèn)">';div_leftmenu_html += ' <ul>';div_leftmenu_html += ' <li>司機(jī)確認(rèn)</li>';div_leftmenu_html += ' <li>確認(rèn)</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);//導(dǎo)航菜單綁定初始化$(".easyui-accordion").accordion();});</script></body></html> 結(jié)果：
手風(fēng)琴加載出來了。
以上所述是小編給大家介紹的jQuery Easyui使用（二）之可折疊面板動態(tài)加載無效果的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
