jquery easyui使用（二）······可折疊面板動態加載無效果

本文轉載自查看原文 2016-08-17 13:16 2376 easyui/ accordion/ 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>

結果：

接下來不斷嘗試

一：usertype = "1";

二：usertype = "2";

三：usertype = "3";

四：

//導航菜單綁定初始化
$(".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>

結果：

手風琴加載出來了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue項目列表折疊面板動畫效果實現 js實現折疊面板 CSS實現折疊面板 for循環使用element的折疊面板遇到的問題-2 vue+ivew使用Collapse 折疊面板把全部面板展開 WeUI-Accordion 折疊面板基於angular antd源碼分析之——折疊面板（collapse） elementui的Collapse 折疊面板箭頭修改方向以及位置 uView 折疊面板顯示，綁定默認顯示 el-collapse折疊面板組件中的面板內容是el-table，展開的時候高度異常