jquery easyui使用（二）······可折叠面板动态加载无效果

最新推荐文章于 2021-02-16 02:13:08 发布
最新推荐文章于 2021-02-16 02:13:08 发布
阅读量196 收藏
点赞数
分类专栏： 前端 文章标签： jquery-easyui easyui accordion
原文链接：https://www.mk2048.com/blog/blog.php?id=h0ch2hik22kj&title=jquery+easyui%E4%BD%BF%E7%94%A8%EF%BC%88%E4%BA%8C%EF%BC%89%C2%B7%C2%B7%C2%B7%C2%B7%C2%B7%C2%B7%E5%8F%AF%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E6%97%A0%E6%95%88%E6
版权

先上代码：

<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>

 结果：

手风琴加载出来了


更多专业前端知识，请上 【猿2048】www.mk2048.com
qq_29069777
关注
专栏目录
求教！Easyui 绑定左侧菜单，右侧显示内容，动态添加多个tab
weixin_45691741的博客
02-16 512
网上copy的，但是出不来 <%@ page contentType=“text/html;charset=UTF-8” language=“java”%> <%@ page import=“java.util." import="java.sql.” pageEncoding=“UTF-8”%> <link rel="stylesheet" type="text/css" href="plugin/jqeasyui194/themes/default/ea
EasyUI+js实现动态加载导航栏
热门推荐
Jack 架构师之路
10-18 1万+
引言    小编最近在做项目的时候遇到一个权限控制的功能，就是根据权限的大小来控制导航栏中的内容，这就遇到了 动态加载导航栏的功能了，但是根据整个界面的风格需要需要用到EasyUI，在开始的时候没有头绪来解决这个问题， 所以就查阅了EasyUI的API文档，俗话说：“如果学会了查看某个技术的API文档，那么编程就成功了一半”，所以我 在API文档中找到了一丝
easyui菜单 java_easyUI menu动态添加
weixin_35988836的博客
02-16 342
HTML代码:Javascript代码:/*绑定右键*/$(".datagrid-cell").live('contextmenu',function(e){//.datagrid-cell 是easyUI表格样式,这样设置的原因是,让菜单在表格上点击右键才显示var selectRow=$('#grid').datagrid('getSelected');//获得选中行数据//显示快捷菜单if(...
EasyUI Accordion 折叠面板默认不展示
qq_38468358的博客
12-03 2882
最近使用easyui做一套后台管理系统，左侧菜单使用的是Accordion折叠面板，需求是打开页面默认不展示子菜单。 在网上找了一些博客，大多数都是说把 jquery.easyui.min.js 中第多少行给注释了，我没有找到相应的代码（我使用的版本1.4.3），后来自己仔细看了一下官方文档，是有相应的配置参数，提供了 selected 参数，设置为 false 是不展示，也可以通过它来设置默认...
easyui加载菜单样式不生效
iteye_679的博客
03-19 914
easyui框架动态生成多级菜单时样式没有生效， 原因为jsp页面为先加载了样式 然后才执行$(".easyui-accordion").append($menu); 导致($menu)中的样式不生效 解决方法为在添加了菜单后重新渲染样式$.parser.parse($(".easyui-accordion")); 以下为javascript代码 $(function(){ ...
EasyUI--权限管理（二）显示左侧菜单
weixin_30387423的博客
06-28 1070
效果图： Login.aspx页面代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="EasyUIWeb.Login" %> <!DOCTYPE html> <html xmlns="http://www.w3....
jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法
10-21
总结来说，解决 jQuery EasyUI 可折叠面板动态加载无效果的问题，关键在于在生成内容后调用 `accordion` 方法进行初始化或更新。确保这一点，你的 Accordion 就能正确地显示和操作动态加载的内容了。这对于创建响应...
jQuery Easyui：解决可折叠面板动态加载无效果问题
解决jQuery EasyUI可折叠面板动态加载无效果的问题，需要仔细检查HTML结构、CSS样式、JavaScript代码以及加载内容的URL，确保所有环节都正确无误。同时，理解EasyUI组件的工作原理和API调用方法是关键。在开发过程中...
解决jQuery Easyui折叠面板动态加载问题
"jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法" 在jQuery Easyui框架中，可折叠面板（accordion）是一种常见的布局组件，它允许用户通过展开和折叠来显示或隐藏子面板。然而，在实际开发过程中，...
jQuery EasyUI Panel面板组件使用详解
10-20
- 在使用Panel组件前，需要引入jQuery EasyUI库的相关文件，包括jQuery库文件、jQuery EasyUI核心文件、本地化文件（如果需要）、以及面板使用的样式表。 - Panel组件的实例化可以通过选择器选中一个元素，然后...
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
10-21
主要介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Jquery_easyui_switchbutton【案例】
12-26
写了一篇博客，为这个博客来个案例，您可以根据我的博客看看 http://blog.csdn.net/cr4blm123/article/details/49998563
easyui+mvc+accordion菜单栏加载
IT界的小菜比
04-24 647
@ViewBag.Title     $.ajax(     {         async: false,         type: 'post',         url: '/Menu/Select',         success: function (json) {             $(document).ready(function ()
SpringMVC+EasyUI实现页面左侧导航菜单
dbn66605的博客
09-07 856
1. 效果图展示 2. 工程目录结构 注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的) 3. 代码 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&...
EasyUI--根据用户权限显示左侧菜单（一）数据库表设计
weixin_30901729的博客
06-28 554
CREATE DATABASE EasyUi_RoleManage GO USE EasyUi_RoleManage GO --权限表 CREATE TABLE tb_role ( roleId INT IDENTITY(1,1) PRIMARY KEY , roleName VARCHAR(50) NOT NULL ) INSERT INTO tb...
easyui（一）
阳某的博客
06-11 597
文章目录easyui的导入获取数据库的树形菜单 easyui的导入 jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 我用的是jQuery1.7和easyui1.5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值