实现效果

初始效果

点击第一条

再点击第二条

第一条自动划动隐藏，第二条划动显示

代码实现

部分HTML

<div class="contain">
    <ul>
        <li class="active-li">
            <div class="line-one">
                <p class="title">研发创新研究中心</p>
                <span class="btn">-</span>
            </div>
            <div>
                <div class="line-two" >
                    <p>
                        坚锋®汇聚了一支经验丰富...
                    </p>
                </div>
                <div class="line-three">
                    <a href="innovation.html">查看更多</a>
                </div>
            </div>
        </li>

        <li>
            <div class="line-one">
                <p class="title">质量分析管理中心</p>
                <span class="btn">-</span>
            </div>
            <div style="display: none">
                <div class="line-two">
                    <p>
                        坚锋®汇聚了一支经验丰富...
                    </p>
                </div>
                <div class="line-three">
                    <a href="innovation.html">查看更多</a>
                </div>
            </div>
        </li>

        <li>
            <div class="line-one">
                <p class="title">数字化营销中心</p>
                <span class="btn">-</span>
            </div>
            <div style="display: none">
                <div class="line-two">
                    <p>
                        坚锋®汇聚了一支经验丰富...
                    </p>
                </div>
                <div class="line-three">
                    <a href="innovation.html">查看更多</a>
                </div>
            </div>
        </li>
       
    </ul>
</div>

CSS样式

.contain li{
    width: 844px;
    color: #666;
    margin-top: 32px;
    list-style-type:disc;
}

.contain .active-li::marker{
    color: #073C82;
}

.contain li:first-child{
    margin-top: 0;
}

.contain .line-one{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666;
    cursor: pointer;
}

.contain .active-li .line-one{
    color: #073C82;
}

.contain .line-two{
    width: 830px;
    margin-top: 27px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 24px;
}

.contain .line-three a{
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 24px;
}

.contain .line-three a:hover{
    color: #073C82;
}

.contain .line-three{
    margin-top: 26px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #073C82;
}

JS

$('.fifth .right .line-one').click(function(){
    $(this).siblings().stop().slideToggle()
    $(this).parent().siblings().find('.line-two').parent().slideUp()
    $(this).parent().siblings().removeClass('active-li')
    $(this).parent().toggleClass('active-li')
})