首页 > 其他分享> 文章详细

树桩菜单domo

2021-12-27 16:05:48 阅读：170 来源： 互联网

标签：菜单 domo color li ul ol 树桩 active find

domo类型原码

重点 :

$('ul>li').click(function () {

$(this).toggleClass('active') // 1 点击切换样式

.find('ol') // 2 找到里面的ol标签

.slideToggle(1000, 'linear') // 3 给ol 添加上卷下拉切换

.parent() // 4 找到父亲li

.siblings() // 5 给兄弟li 去除样式

.removeClass('active')

.find('ol') // 6 找到li 里面的ol

.slideUp(1000, 'linear') // 7 上卷

})

    * {
            margin: 0;
            padding: 0;
        }
        ul,
        ol,
        li {
            list-style: none;
        }
        ul {
            width: 200px;
            border: 2px solid #000;
            margin: 50px auto;
        }
        ul>li::before {
            content: "★";
        }
        ul>li.active::before {
            content: "☆";
        }
        ul>li>ol {
            padding: 0 0 0 20px;
            display: none;
        }
        ul>li:nth-child(1) {
            background-color: pink;
        }
        ul>li:nth-child(2) {
            background-color: skyblue;
        }
        ul>li:nth-child(3) {
            background-color: teal;
        }
        ul>li:nth-child(4) {
            background-color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <li>蔬菜
            <ol>
                <li>韭菜</li>
                <li>大白菜</li>
                <li>生菜</li>
                <li>菠菜</li>
            </ol>
        </li>
        <li>生鲜
            <ol>
                <li>龙虾</li>
                <li>鲍鱼</li>
                <li>龙虾</li>
                <li>刺身</li>
            </ol>
        </li>
        <li>凉菜
            <ol>
                <li>凉拌土豆丝</li>
                <li>泡黄瓜</li>
                <li>藕片</li>
                <li>猪肚</li>
            </ol>
        </li>
        <li>主菜
            <ol>
                <li>小鸡炖蘑菇</li>
                <li>可乐鸡翅</li>
                <li>水煮肉片</li>
                <li>满汉全席</li>
            </ol>
        </li>
    </ul>


    <script src="../../../jquery.js"></script>
    <script>
        $('ul>li').click(function () {
            $(this).toggleClass('active')               // 1   点击切换样式
                .find('ol')                             // 2   找到里面的ol标签
                .slideToggle(1000, 'linear')            // 3   给ol 添加上卷下拉切换
                .parent()                               // 4   找到父亲li 
                .siblings()                             // 5   给兄弟li 去除样式
                .removeClass('active')
                .find('ol')                             // 6    找到li 里面的ol
                .slideUp(1000, 'linear')                // 7    上卷
        })

    </script>


</body>

</html>

标签：菜单,domo,color,li,ul,ol,树桩,active,find
来源： https://blog.csdn.net/m0_61382303/article/details/122173686

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

树桩菜单domo

domo类型 原码

重点 :

domo类型原码