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

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

分类：表单代码 > 下拉框select 难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

下拉框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>