js 侧边栏导航

效果

 

 html

<div class="solution solution_main">

            <ul class="solution_ul1">

                <li><a href="javascript:;">11111</a>

                    <span></span>

                    <ul class="proList2">

                        <li><a href="javascript:;">111</a></li>

                        <li><a href="javascript:;">111</a></li>

                        <li><a href="javascript:;">111</a></li>

                    </ul>

                </li>

                <li><a href="javascript:;">22222</a>

                    <span></span>

                    <ul class="proList2">

                        <li><a href="javascript:;">222</a></li>

                        <li><a href="javascript:;">222</a></li>

                        <li><a href="javascript:;">222</a></li>

                    </ul>

                </li>

                <li><a href="javascript:;">33333</a>

                    <span></span>

                    <ul class="proList2">

                        <li><a href="javascript:;">333</a></li>

                        <li><a href="javascript:;">333</a></li>

                        <li><a href="javascript:;">333</a></li>

                    </ul>

                </li>

            </ul>

            <div class="solution_ul2">

                123

            </div>

        </div>

 

css

.solution_main {

    display: flex;

    justify-content: space-between;

}

.solution_ul1 {

    width: 30%;

}

.solution_ul2 {

    width: 70%;

}

.solution ul li {

    position: relative;

}

.solution ul li a {

    height: 48px;

    line-height: 48px;

    color: #333;

    font-size: 15px;

    display: block;

    border-bottom: 1px solid #d2d7d9;

    padding: 0 15px;

}

.solution ul li span {

    width: 45px;

    height: 49px;

    position: absolute;

    right: 15px;

    top: 0;

    background: url(../img/solution/jia_black1.svg) no-repeat center;

    background-size: 16px;

}

.solution ul .on span {

    background-image: url(../img/solution/jian_black.svg);

    background-size: 15px;

}

.solution .proList2 li a {

    font-size: 13px;

    height: 36px;

    line-height: 36px;

}

.solution .proList2 {

    display: none;

}

 

js

$('.solution li span').on('click', function () {

    if ($(this).parents("li").hasClass("on")) {

        $(this).parents("li").removeClass('on');

        $(this).parents("li").find(".proList2 ").slideUp();

    } else {

        $(this).parents("li").addClass('on');

        $(this).parents("li").siblings().removeClass('on');

        $(this).parents("li").find(".proList2 ").slideDown();

        $(this).parents("li").siblings().find(".proList2 ").slideUp();

    }

})