ul li 树状图实现显示隐藏

最新推荐文章于 2024-10-25 11:39:25 发布

句点_a

最新推荐文章于 2024-10-25 11:39:25 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_41851047/article/details/83545749

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的手风菜单交互效果，通过点击菜单项前的图标可以展开或收起子菜单，同时保持菜单的整洁性和易用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    $(function () {
        $('li>span').click(function (event) {
            /* Act on the event */
            if ($(this).parent('li').find('ul').length > 0) {
                $(this).html("-");
                if ($(this).siblings('ul').is(':hidden')) {
                    $(this).parent('li').addClass('open').children('ul').show();
                    $(this).parent('li').siblings().removeClass('open').children('ul').hide();
                } else {
                    $(this).html("+");
                    $(this).parent('li').removeClass('open').children('ul').hide();
                }
            } else { 
                $(this).parent('li').siblings().removeClass('open');
            }
            $(this).parent('li').siblings().children('ul').hide(); 
        })
    })
</script>
<style>
    ul { list-style: none; }
    ul li { cursor: pointer; } 
    ul li ul { display: none; padding-left: 20px; }
    ul span { border:1px solid ; width:10px; height:10px; text-align:center;line-height:10px;    display: inline-table;}
    
</style>


<div>
    <ul>
        <li>
            <span>+</span>1
            <ul>
                <li>
                    <span>+</span>  5 
                    <ul>
                        <li> <span>+</span>1 
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li> 
                              </ul>
                        </li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </li>
    </ul>
</div>

效果图