jQuery黑白两种响应式手机下拉框select

收藏

好不容易找到的响应式下拉框演示，在苹果浏览器下拉框是居左的，不好控制，本文的是css+jQuery制作的下拉框select,兼容主流浏览器，你可以缩小浏览器看看效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 118 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

下拉框html代码

<div class="select">
    <span class="placeholder">请选择</span>
    <ul>
        <li>百度</li>
        <li>谷歌</li>
        <li>雅虎</li>
        <li>新浪</li>
    </ul>
</div>

<script>
    $('.select').on('click', '.placeholder', function(e) {
        var parent = $(this).closest('.select');
        if (!parent.hasClass('is-open')) {
            parent.addClass('is-open');
            $('.select.is-open').not(parent).removeClass('is-open');
        } else {
            parent.removeClass('is-open');
        }
        e.stopPropagation();
    }).on('click', 'ul>li', function() {
        var parent = $(this).closest('.select');
        parent.removeClass('is-open').find('.placeholder').text($(this).text());
    });

    $('body').on('click', function() {
        $('.select.is-open').removeClass('is-open');
    });
</script>