dakedou-more-menus
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script src="./layui/layui.js"></script>
    <link rel="stylesheet"  href="./layui/css/layui.css"/>
</head>
<body>

 <div id="box-item"></div>

</body>
</html>
<script>
    const data =[{ id: 1, name: '果树' },
                { id: 2, name: '杨树' },
                { id: 3, name: '苹果' },
                { id: 4, name: '香蕉' },
                { id: 5, name: '芝麻蕉' },
                { id: 6, name: '酸菜' },
                { id: 7, name: '果树' },
                { id: 8, name: '杨树' },
                { id: 9, name: '杨梅' },
                { id: 10, name: '果汁' },
                { id: 11, name: '橄榄' },
                { id: 12, name: '鲫鱼' },
                { id: 13, name: '奶牛' },
                { id: 15, name: '橄榄' },
                { id: 16, name: '木鱼' },
                { id: 17, name: '水蛭' },
                { id: 18, name: '犀牛' }]
    layui.config({
        base: './js/'
    }).extend({
        moreMenus: 'moreMenus'
    });

    layui.use(['moreMenus'],function(){
    var moreMenus = layui.moreMenus
    moreMenus.init({
        elemId:'#box-item',
        data:data,
        rows:1,
        moreUpText:'更多',
        moreDownText:'收起分类',
        // href:'https://www.layui.com/',
        herfBlank:true,
        // themeColor:'black', // red(赤色) 、orange(橙色) 、green(墨绿色（主色调）) 、cyan(藏青色) 、blue(蓝色) 、black(黑色) 、gray(灰色)
        // size:'sm'  //lg(大型) 、  sm(小型) 、 xs(迷你)
    })


    });
</script>