随记 - jq 模拟select选择框 - 简单易懂

html

<div class="new_ai_music mr10">
    <!-- 主体内容 -->
    <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>
    <!-- 模拟选择框内容 -->
    <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">从音乐库选择</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) {                    // 点击
    if($(this).next('.new_ai_music_sel').css('display') == 'none') {      // 检测是否打开选择框
        $(this).next('.new_ai_music_sel').show();
        var main = $(this).find('.new_ai_music_main1').text();          // 获取文字与选择框内文字匹配
        $(this).next('.new_ai_music_sel').find('.new_ai_music_sel1').each(function() {    // 循环获取选择框内容
            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) {    // 点击空白区域关闭选择框
    var _con = $('.new_ai_music_sel');   // 设置目标区域
    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) {    // 点击选择框，同步内容
    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();
})