左侧导航多级下拉_左侧下拉导航节点-CSDN博客

本文链接：https://blog.csdn.net/amy_king_0/article/details/78772438

左侧导航多级下拉

只要结果，不问过程的童鞋们，福利来啦，拿走不谢！
以下代码适用于：数据循环出来的列表，非数据循环出来的列表。

捉急，捉急，捉急，不废话直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧列表</title>
</head>
<style>
    /*下面的的css代码不需要*/
    *{
        padding:0;
        margin:0;
    }
    li{
        list-style: none;
    }
        /*以上的css代码不需要*/

    .drop_list>ul>li ul{
        display: none;
    }
    .drop_list a{
        position: relative;
        padding-left: 20px;
    }
    .drop_list .current:before{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid;
        content: "";
        position: absolute;
        top: 6px;
        left: 0;
        color: #ee8900;
    }
    .drop_list .current.drop:before{
        border-top: 7px solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        position: absolute;
        top: 9px;
        left: 0;
    }
    .drop_list .list_ul2{
        margin-left:15px;
    }
    .drop_list .list_ul3{
        margin-left:30px;
    }
    .drop_list .list_ul4{
        margin-left:25px;
    }
</style>
<body>

<div class="drop_list">
    <ul>
        <li>
            <a class="current">一级 第四个</a>
            <ul class="list_ul2">
                <li>
                    <a>二级</a>
                </li>
            </ul>
        </li>
        <li>
            <a class="current">一级 有下拉</a>
            <ul class="list_ul2">
                <li>
                    <a class="current">二级 有下拉</a>
                    <ul class="list_ul3">
                        <li><a>三级菜单</a></li>
                        <li><a>三级菜单</a></li>
                        <li><a>三级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a>二级</a>
                </li>
                <li>
                    <a class="current">二级 有下拉</a>
                    <ul class="list_ul3">
                        <li>
                            <a class="current">三级菜单 有下拉</a>
                            <ul class="list_ul4">
                                <li><a>四级</a></li>
                                <li><a>四级</a></li>
                                <li><a>四级</a></li>
                            </ul>
                        </li>
                        <li><a>三级菜单</a></li>
                        <li><a>三级菜单</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(function(){
        $(".drop_list>ul>li").each(function(i){
            $(".drop_list>ul>li").eq(i).find("a").click(function(){
$(this).toggleClass("drop").next().stop().slideToggle().parents().siblings().find("ul").slideUp().siblings().removeClass("drop");
            })
        })
    })
</script>

</body>