手风琴菜单

HTML

<dl class="list_dl">
            <dt class="list_dt">
                <p>工程车辆</p>
                <i class="list_dt_icon"></i>
            </dt>
            <dd class="list_dd">
                <ul>
                    <li class="list_li">1</li>
                </ul>
            </dd>
            <dt class="list_dt">
                <p>土方机械</p>
                <i class="list_dt_icon"></i>
            </dt>
            <dd class="list_dd">
                <ul>
                    <li class="list_li">2</li>
                </ul>
            </dd>
            <dt class="list_dt">
                <p>道路施工</p>
                <i class="list_dt_icon"></i>
            </dt>
            <dd class="list_dd">
                <ul>
                    <li class="list_li">3</li>
                </ul>
            </dd>
            <dt class="list_dt">
                <p>管道</p>
                <i class="list_dt_icon"></i>
            </dt>
            <dd class="list_dd">
                <ul>
                    <li class="list_li">4</li>
                </ul>
            </dd>
        </dl>

CSS

.list_dt {
        height: 1rem;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.46rem 0 0.3rem;
    }

    .list_dt:hover ._after {
        display: block;
        width: 3px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    #open ._after {
        display: block;
        width: 3px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .list_dt_icon {
        display: block;
        width: 0.32rem;
        height: 0.2rem;
        background: url("__IMG__/exhibition/top.png") no-repeat;
    }

    #open .list_dt_icon {
        background: url("__IMG__/exhibition/normal_next.png") no-repeat;
    }

    .list_dd {
        display: none;
    }

JS

// 手风琴
        $(".list_dt").on("click", function () {
            $('.list_dd').stop();
            $(this).siblings("dt").removeAttr("id");
            if ($(this).attr("id") == "open") {
                $(this).removeAttr("id").siblings("dd").slideUp();
            } else {
                $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
            }
        });

是这样的：