jq仿select标签,兼容IE7

一直相找一个可以兼容IE7的select标签,可好多插件都太大,用起来太麻烦,所以自己写了一款,亲测,可以兼容IE7,有不足之处还请多多指教。。

html:

<div class="clearfix">
            
            <!--my-select-->
            <div class="my-select">
                <div class="my-select-btn">未分类11</div>
                <div class="my-select-wrap">
                    <dl class="my-select-info">
                        <dd>未分类11</dd>
                        <dd>正文</dd>
                        <dd>来源类型</dd>
                        <dd>分类</dd>
                        <dd>相关主题</dd>
                        <dd>相关主题</dd>
                        <dd>相关主题</dd>
                    </dl>
                </div>
            </div>
            <!---->


            <!--my-select-->
            <div class="my-select">
                <div class="my-select-btn">未分类11</div>
                <div class="my-select-wrap">
                    <dl class="my-select-info">
                        <dd>未分类11</dd>
                        <dd>正文</dd>
                        <dd>来源类型</dd>
                        <dd>分类</dd>
                        <dd>相关主题</dd>
                    </dl>
                </div>
            </div>
            <!---->

        </div>

css:

/*select*/
.my-select {position: relative;  display: block; width: 80px; height: 32px;border: 1px solid #dfdfdf;border-radius: 4px;background: url('../img/select-arr-b.png') no-repeat right center #fff;padding-right: 32px;cursor: pointer; text-indent: 10px;}
.my-select .my-select-btn{ line-height: 32px; border-radius: 3px; margin: 0; }
.my-select .my-select-wrap{display: none; position: absolute;  left: -1px; top:100%;margin-top: 5px; background: #fff;border: 1px solid #dfdfdf; width: 100%;}
.my-select-active{z-index: 999;background-image: url("../img/select-arr-t.png");}
.my-select-active .my-select-wrap{display: block;box-shadow: 0 2px 2px #f1f1f1}
.my-select .my-select-info{background: #fff; overflow: auto; max-height: 120px;line-height: 1.8; padding-bottom: 10px;}
.my-select .my-select-info dd:hover{background: #f1f1f1}
.my-select-relative{position: relative;z-index: 99;}

js:

$(function () {
    var btn = $('.my-select'),mark = false,last;
    btn.click(function () {
        var select = $(this),
            val = select.find('.my-select-btn');
        select.addClass('my-select-active');
        mark = true;
        if(select.parents().is('.clearfix')) {
            select.parents('.clearfix').addClass('my-select-relative');
        }
        last = select;
        setTimeout(function () {
            if(mark){
                $('body').on('click',function (e) {
                    var target = $(e.target);
                    if(target.parent().is('.my-select-info') && (target.parents().is('.my-select-active'))){
                        val.html(target.html());
                    }
                    if(target.hasClass('my-select-btn')){
                        $('body').unbind();
                    }else{
                        $('body').unbind();
                        mark = false;
                        last = null;
                    }
                    if($('.my-select-active').length>0){
                        select.removeClass('my-select-active');
                    }
                    if($('.my-select-relative')){
                        select.parents('.clearfix').removeClass('my-select-relative');
                    }
                })
            }
        },30)
    })
});


阅读更多
文章标签: jq js select IE7
个人分类: js
想对作者说点什么? 我来说一句

jq 兼容ie7 8的图片轮播

2015年01月03日 212KB 下载

Jplayer音乐播放器兼容IE7

2015年05月14日 6.96MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭