如何在同一页面中调用多个相同的JS联动菜单？

2024年10月26日 互联网
在织梦同一页面调用多个相同的js联动菜单，可以通过***粘贴相应的代码实现。

在织梦（DedeCMS）中，有时候需要在同一页面调用多个相同的JS联动菜单，为了实现这个需求，我们需要确保每个菜单具有独立的ID和名称，并且正确加载相应的JavaScript文件和CSS样式表，下面是一个详细的步骤指南：

如何在同一页面中调用多个相同的JS联动菜单？

创建或获取JS联动菜单的代码

你需要有一个JS联动菜单的代码，这可以是你从网上下载的，也可以是自己编写的，假设我们使用的是一个简单的三级联动菜单，代码如下：

<!DOCTYPE html>
<html lang="zhCN">
<head>
    <meta charset="UTF8">
    <title>联动菜单示例</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
    <script src="linkage.js"></script>
</head>
<body>
    <div id="linkageMenu1" class="linkagemenu"></div>
    <div id="linkageMenu2" class="linkagemenu"></div>
</body>
</html>

准备CSS样式

创建一个名为styles.css的文件，并添加以下样式：

.linkagemenu {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ccc;
}

编写JavaScript代码

创建一个名为linkage.js的文件，并添加以下JavaScript代码：

$(document).ready(function() {
    var data = [
        { "id": "1", "name": "一级菜单1", "children": [
            { "id": "11", "name": "二级菜单11", "children": [
                { "id": "111", "name": "三级菜单111" },
                { "id": "112", "name": "三级菜单112" }
            ]},
            { "id": "12", "name": "二级菜单12", "children": [
                { "id": "121", "name": "三级菜单121" },
                { "id": "122", "name": "三级菜单122" }
            ]}
        ]},
        { "id": "2", "name": "一级菜单2", "children": [
            { "id": "21", "name": "二级菜单21", "children": [
                { "id": "211", "name": "三级菜单211" },
                { "id": "212", "name": "三级菜单212" }
            ]},
            { "id": "22", "name": "二级菜单22", "children": [
                { "id": "221", "name": "三级菜单221" },
                { "id": "222", "name": "三级菜单222" }
            ]}
        ]}
    ];
    function initLinkageMenu(container) {
        container.empty();
        data.forEach(function(item) {
            var option = $('<option>').val(item.id).text(item.name);
            container.append(option);
            if (item.children && item.children.length > 0) {
                initLinkageMenu(container.find('~ select')); // 递归初始化子菜单
            }
        });
    }
    $('.linkagemenu').each(function() {
        var menuId = $(this).attr('id');
        $('#' + menuId).html('<select></select>'); // 初始化第一个下拉框
        initLinkageMenu($('#' + menuId).find('select'));
    });
});

修改模板文件

将上述HTML代码嵌入到你的织梦模板文件中，在index.htm中：

如何在同一页面中调用多个相同的JS联动菜单？

{dede:include filename="header.htm" /}
<div id="linkageMenu1" class="linkagemenu"></div>
<div id="linkageMenu2" class="linkagemenu"></div>
{dede:include filename="footer.htm" /}

测试页面

保存所有文件后，访问你的网站首页，查看是否成功显示了两个独立的联动菜单，如果没有问题，那么恭喜你已经完成了一个织梦同一页面调用多个相同的JS联动菜单的需求！

FAQs

Q1: 如何更改联动菜单的数据源？

A1: 你可以直接在linkage.js文件中修改data，或者将数据存储在一个单独的JSON文件中，并通过AJAX请求加载数据。

$.getJSON('path/to/your/data.json', function(data) {
    // 使用返回的数据初始化联动菜单
    $('.linkagemenu').each(function() {
        var menuId = $(this).attr('id');
        $('#' + menuId).html('<select></select>'); // 初始化第一个下拉框
        initLinkageMenu($('#' + menuId).find('select'), data);
    });
});

Q2: 如何为每个联动菜单设置不同的样式？

如何在同一页面中调用多个相同的JS联动菜单？

A2: 你可以在CSS文件中为每个联动菜单指定不同的样式类名。

#linkageMenu1 {
    backgroundcolor: #f0f0f0;
}
#linkageMenu2 {
    backgroundcolor: #e0e0e0;
}

然后在HTML模板文件中应用这些样式：

<div id="linkageMenu1" class="linkagemenu"></div>
<div id="linkageMenu2" class="linkagemenu"></div>

这样，你就可以为每个联动菜单设置不同的背景颜色或其他样式了。

最新文章