又见手风琴

css

/*必须要问的问题*/
.must{
    margin: 25px;
    border-radius: 10px;
    position: relative;
}
.must div{
    border-radius: 10px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}
.must div+div{
    margin-top: -20px;
}
.must_item_tit{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 10px auto 10px;
}
.must_item_txt{
    padding: 20px;
    font-size: 22px;
    display: none;
}
.must_click_close{
    text-align: center;
    font-size: 22px;
    color: red;
    margin-bottom: 20px;
}

html

<div class="must">
                    <div>
                        <h3 class="must_item_tit">
                            结婚前必须知道的20个问题
                        </h3>
                        <p class="must_item_txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aliquid illum omnis reprehenderit est temporibus corporis consectetur voluptatum minus quos unde eos dolores dolore aut consequatur. Debitis quasi cupiditate vitae!</p>
                        <p class="must_click_close">点击可展开查看</p>
                    </div>
                    <div>
                        <h3 class="must_item_tit">
                            结婚前必须知道的20个问题
                        </h3>
                        <p class="must_item_txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aliquid illum omnis reprehenderit est temporibus corporis consectetur voluptatum minus quos unde eos dolores dolore aut consequatur. Debitis quasi cupiditate vitae!</p>
                        <p class="must_click_close">点击可展开查看</p>
                    </div>
                    <div>
                        <h3 class="must_item_tit">
                            结婚前必须知道的20个问题
                        </h3>
                        <p class="must_item_txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aliquid illum omnis reprehenderit est temporibus corporis consectetur voluptatum minus quos unde eos dolores dolore aut consequatur. Debitis quasi cupiditate vitae!</p>
                        <p class="must_click_close">点击可展开查看</p>
                    </div>
                    <div>
                        <h3 class="must_item_tit">
                            结婚前必须知道的20个问题
                        </h3>
                        <p class="must_item_txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere aliquid illum omnis reprehenderit est temporibus corporis consectetur voluptatum minus quos unde eos dolores dolore aut consequatur. Debitis quasi cupiditate vitae!</p>
                        <p class="must_click_close">点击可展开查看</p>
                    </div>
                </div>

js

//手风琴
                $(".must div").click(function() {
                    $(this).children('.must_item_txt').slideDown(200).parent().siblings().children('.must_item_txt').slideUp(200);
                    $(this).children('.must_click_close').text('点击收起').parent().siblings().children('.must_click_close').text('点击展开')
                });
                $('.must_click_close').click(function() {
                    $(this).parent().children('.must_item_txt').slideToggle(200).parent().siblings().children('.must_item_txt').slideUp(200);
                    if($(this).text() == '点击收起') {
                        $(this).text('点击展开');
                        return false
                    }
                })
                //动态设置手风琴层级
                $('.must>div').each((i, el) => {
                    console.log(i, el);
                    $(el).css({
                        "zIndex": i
                    })
                })

---