layui下拉菜单怎么实现切换菜单1菜单2

Question

比如这个下拉菜单，里面又菜单1菜单2菜单3，我如何设置layui，才能选择这个的时候，在“wan口网络已链接”这个地方显示菜单1里面的内容，菜单2里面的内容？这个菜单1的内容该怎么写？

比如菜单1：

<ul>菜单1里面的东西A</ul>

<ul>菜单1里面的东西B</ul>

<ul>菜单1里面的东西V</ul>

<ul>菜单1里面的东西D</ul>

菜单2：

<ul>菜单2里面的东西A</ul>

<ul>菜单2里面的东西B</ul>

<ul>菜单2里面的东西V</ul>

<ul>菜单2里面的东西D</ul>

 

 

以上，layui怎么实现？是需要改<script>吗，如下：

<script>
    layui.use('dropdown', function(){
        var dropdown = layui.dropdown
        dropdown.render({
            elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例
            ,data: [{
                title: 'menu item 1'
                ,id: 100
                ,href: '#'
            },{
                title: 'menu item 2'
                ,id: 101
                ,href: 'https://www.layui.com/' //开启超链接
                ,target: '_blank' //新窗口方式打开
            },{type: '-'},{
                title: 'menu item 3'
                ,id: 102
                ,type: 'group'  //菜单类型，支持：normal/group/parent/-
                ,child: [{
                    title: 'menu item 3-1'
                    ,id: 103
                },{
                    title: 'menu item 3-2'
                    ,id: 104
                    ,child: [{
                        title: 'menu item 3-2-1'
                        ,id: 105
                    },{
                        title: 'menu item 3-2-2'
                        ,id: 106
                    }]
                },{
                    title: 'menu item 3-3'
                    ,id: 107
                }]
            },{type: '-'},{
                title: 'menu item 4'
                ,id: 108
            },{
                title: 'menu item 5'
                ,id: 109
                ,child: [{
                    title: 'menu item 5-1'
                    ,id: 11111
                    ,child: [{
                        title: 'menu item 5-1-1'
                        ,id: 2111
                    },{
                        title: 'menu item 5-1-2'
                        ,id: 3111
                    }]
                },{
                    title: 'menu item 5-2'
                    ,id: 52
                }]
            },{type:'-'},{
                title: 'menu item 6'
                ,id: 6
                ,type: 'group'
                ,isSpreadItem: false
                ,child: [{
                    title: 'menu item 6-1'
                    ,id: 61
                },{
                    title: 'menu item 6-2'
                    ,id: 62
                }]
            }]
            ,id: 'demo1'
            //菜单被点击的事件
            ,click: function(obj){
                console.log(obj);
                layer.msg('回调返回的参数已显示再控制台');
            }
        });
    });
</script>

 

Answer 1

官网不是有文档说明吗？

子菜单项链接，当然是你的自定义页面

多看看官网文档

https://www.layui.com/doc/modules/dropdown.html