html

<div class="new_ai_music mr10">
    <!-- 主體內(nèi)容 -->
    <div class="new_ai_music_main">
        <div class="new_ai_music_main1">無背景音樂</div>
        <img src="images/new/arrow_bot.png" class="new_ai_music_main2" width="16" />
    </div>
    <!-- 模擬選擇框內(nèi)容 -->
    <div class="new_ai_music_sel" style="display: none;">
        <div class="new_ai_music_sel1 act">
            <div class="new_ai_music_sel2">無背景音樂</div>
        </div>
        <div class="new_ai_music_sel1">
            <div class="new_ai_music_sel2">從音樂庫(kù)選擇</div>
            <img src="images/new/icon_vip.png" width="24" class="new_ai_music_sel3" />
        </div>
        <div class="new_ai_music_sel1">
            <div class="new_ai_music_sel2">從本地選擇</div>
            <img src="images/new/icon_vip.png" width="24" class="new_ai_music_sel3" />
        </div>
    </div>
</div>

css

.new_ai_music{background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 2px;width: 154px;height: 28px;position: relative;}
.new_ai_music_main{padding: 0 30px;line-height: 26px;text-align: center;position: relative;cursor: pointer;}
.new_ai_music_main1{font-size: 13px;color: #333333;}
.new_ai_music_main2{position: absolute;top: 5px;right: 8px;}
.new_ai_music_sel{position: absolute;left: 0;right: 0;top: 30px;background: #FFFFFF;border: 1px solid #CCCCCC;box-shadow: 0 0 10px 0 rgba(0,0,0,0.20);border-radius: 2px;z-index: 5;}
.new_ai_music_sel1{height: 28px;text-align: center;line-height: 28px;padding: 0 30px;position: relative;cursor: pointer;}
.new_ai_music_sel1:hover{background: #F7F7F7;}
.new_ai_music_sel2{font-size: 13px;color: #333333;}
.new_ai_music_sel1:hover .new_ai_music_sel2{color: #267EFF;}
.new_ai_music_sel1.act{background: #F7F7F7;}
.new_ai_music_sel1.act .new_ai_music_sel2{color: #267EFF;}
.new_ai_music_sel3{position: absolute;right: 5px;top: 8px;}

js

 $('.new_ai_music_main').click(function(e) {                    // 點(diǎn)擊
    if($(this).next('.new_ai_music_sel').css('display') == 'none') {      // 檢測(cè)是否打開選擇框
        $(this).next('.new_ai_music_sel').show();
        var main = $(this).find('.new_ai_music_main1').text();          // 獲取文字與選擇框內(nèi)文字匹配
        $(this).next('.new_ai_music_sel').find('.new_ai_music_sel1').each(function() {    // 循環(huán)獲取選擇框內(nèi)容
            if($(this).find('.new_ai_music_sel2').text() == main) {    // 匹配一致增加樣式
                $(this).addClass('act').siblings().removeClass('act');
            }
        })
    }else {
        $(this).next('.new_ai_music_sel').hide();
    }
    e.stopPropagation();
})
$(document).click(function(e) {    // 點(diǎn)擊空白區(qū)域關(guān)閉選擇框
    var _con = $('.new_ai_music_sel');   // 設(shè)置目標(biāo)區(qū)域
    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
        _con.hide();
    }else{
        _con.show();
    }
    e.stopPropagation();    // 防止冒泡行為
});
$('.new_ai_music_sel2').click(function(e) {    // 點(diǎn)擊選擇框，同步內(nèi)容
    var text = $(this).text();
    $(this).parent().addClass('act').siblings().removeClass('act');
    $(this).parent().parent().prev('.new_ai_music_main').find('.new_ai_music_main1').text(text);
    $(this).parent().parent().hide();
    e.stopPropagation();
})