react 項(xiàng)目中，我想實(shí)現(xiàn)這種效果，點(diǎn)擊任務(wù)一會(huì)彈出任務(wù)二、三、四、五，然后任務(wù)一的內(nèi)容變成點(diǎn)擊的內(nèi)容，后面的方框內(nèi)容也會(huì)隨著點(diǎn)擊內(nèi)容而變化

render() {
        var divStyle = {
            backgroundImage:`url(${Background})`
        }

        return (

            <div style={divStyle}
                 className='primaryStyle'>
                 
                 {/* 選擇 鎖定與未鎖定 */}

                    <div className={'select_contain'}>
                        <div className={'select_item clearfix left'}>
                            <div className={'select_tit left'}></div>
                            <div className={'select_module_con left'}>
                                <div className={'select_result'}>
                                    <span>任務(wù)一：開啟中</span>
                                    <div className={'triangle'}></div>
                                </div>
                                <ul>
                                    <li>節(jié)目1</li>
                                    <li>節(jié)目2</li>
                                    <li>節(jié)目3</li>
                                </ul>
                            </div>
                        </div>
                        <div className={'select_item clearfix left'}>
                            <div className={'select_tit left'}></div>
                            <div className={'select_module_con left'}>
                                <div className={'select_result'}>
                                    <span>未鎖定</span>
                                    <div class={'triangle'}></div>
                                </div>
                                <ul>
                                    <li>嘉賓1</li>
                                    <li>嘉賓2</li>
                                    <li>嘉賓3</li>
                                </ul>
                            </div>
                        </div>
                    </div>
            </div>
        )
    }

樣式

/* 鎖定 */
ul,li{
    list-style: none
}
.left{
    float: left;
}
.right{
    float: right;
}

/* 總體 */
.select_contain{
    font-size: 14px;
    color: #519BB1;
    line-height: 38px;
    position: absolute;
    left: 1550px;
    top: 82px;
    width: 300px
    /* background-color: aqua; */
}

/* 每個(gè)部分 */
.select_item{
    margin-right: 5px;
    position: relative;
    /* background-color: greenyellow; */
}

/* 每個(gè)部分標(biāo)題 */
.select_tit{
    margin-right: 0px;
}

.select_result{
    width: 200px;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    border:1px solid #ccc;
    text-align: center;
    /* 該屬性允許您為元素添加圓角邊框 */
    border-radius: 4px;
    /* text-indent 屬性規(guī)定文本塊中首行文本的縮進(jìn) */
    /* 允許使用負(fù)值。如果使用負(fù)值，那么首行會(huì)被縮進(jìn)到左邊。*/
    text-indent: -8px;
    cursor:pointer;
}
/* 第一個(gè) */
.select_item:first-child .select_result{
    background-color: #519BB1;
    color:#FFFFFF;
}

/* 第兩個(gè) */

.select_item:nth-child(2) .select_result{
    background-color: #3565A8;
    color: #FFFFFF;
    width: 67px;
}

.select_item:nth-child(2) {
    margin-right: 0px;
}

.select_result .triangle{
    border:5px solid transparent; /* transparent 背景顏色透明 */
    border-top:5px solid #666;
    position: absolute;
    top: 15px;
    left:185px;
}

/*
    <div class='select_result'>
        <span>選擇節(jié)目</span>
        <div class='triangle'></div>
    </div>
*/
.select_item:nth-child(2) .select_result .triangle{
    left:57px;
    display: none;
}

.select_item:nth-child(2) .select_result{
    text-indent: 0px;
}

/* 下拉部分 */
.select_item ul{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    width:100px;
    background: #f3f3f3;
    border:1px solid #ccc;
    border-radius:0 0 4px 4px;
    border-top-color:#f3f3f3;
    margin-top:-4px;
}

.select_item ul li{
    text-align: center;
    cursor: pointer;
}
.select_item ul li:hover{
    background: #f4a100;
    color: #fff;
}