浅尝模拟下拉框select

作者: 两只凤梨日期: 2016-07-29

179294

前言

本文主要模拟下拉框select控件
详情请戳参考页面：梦幻西游手游武神坛

模拟select主要实现目标

1.点击下拉框区域，下拉列表没显示则显示，有显示则收起来，下拉箭头样式有所改变；
2.鼠标hover下拉列表上面有对应的交互；
3.点击选择下拉列表的值，收起下拉列表，并且在下拉框区域显示选中的值；
4.有多个下拉框的时候，点击其它下拉框区域，其它兄弟下拉框没收起的先收起，同时展开当前下拉菜单；
5.点击窗口空白处，有下拉菜单没收起来的也收起来。

实现步骤

以下是实现的html代码

<div class="select-wrap j-select-area">
    <div class="select-text list-hide" id="videoPeriodTxt">第一赛季</div>
    <ul class="select-item" id="videoPeriod">
        <li data-type="video-period" data-value="1">第一赛季</li>
        <li data-type="video-period" data-value="2">第二赛季</li>
    </ul>
</div>
 
<div class="select-wrap j-select-area">
    <div class="select-text list-hide">组别</div>
    <ul class="select-item">
        <li data-type="video-group" data-value="">组别</li>
        <li data-type="video-group" data-value="1">甲组</li>
        <li data-type="video-group" data-value="2">乙组</li>
        <li data-type="video-group" data-value="3">丙组</li>
    </ul>
</div>

以下是css样式

.select-wrap{
    width: 108px;
    height: 38px;
    line-height: 38px;
    float:left;
    margin: 0 5px;
    font-family: "Microsoft YaHei";
    text-align: left;
    color:#eccc6b;
    cursor: pointer;
    position: relative;
    user-select:none;//设置元素和子元素的文本都不可选
    -moz-user-select:none;
    -webkit-user-select:none;
    z-index: 9999;
    .select-text{
        text-indent:.2em;
        background: url(../img/select.jpg) #35363a;
        height: 38px;
        &.list-hide{
            background-position: 0 0;//下拉框隐藏时箭头向下
        }
        &.list-show{
            background-position:0 -38px;//下拉框显示时箭头向下
        }
    }
    .select-item{
      z-index: 9999;
      position: absolute;
      width: 100%;
      left:-1px;
      top: 38px;
      border: 1px solid #eccc6b;
      display: none;
        li{
            height: 38px;
            text-indent:1.2em;
            background: #35363a;
            &:hover{
              background: #eccc6b;
              color:#fff;
            }
        }
    }
}

以下是js代码

var changeSelectFun = function(){
 
    $('.j-select-area').click(function(e){
        var $e = $(e.target),
            $this = $(this),
            $sltlist = $this.children('.select-item'),
            $siblingsltlist=$this.siblings().children(".select-item");
 
        //阻止事件冒泡兼容IE
        e.stopPropagation() ? e.stopPropagation() : (e.cancelBubble = true);
 
        //点击区域是下拉框
        if($e.is('.select-text')){
            //其它兄弟下拉框没收起来就收起来
            if($siblingsltlist.is(":visible")){$siblingsltlist.slideUp(200).prev().removeClass('list-show')};
             
            if($sltlist.is(":visible")){
                $sltlist.slideUp(200).prev().removeClass('list-show')
            }else{
                $sltlist.slideDown(200).prev().addClass('list-show');
            }
        }
 
        //点击区域是下拉列表，则进行选值以及收起下拉列表
        if($e.is('li[data-value]')){
            $sltlist.slideUp(200).prev().removeClass('list-show');
            $this.children('.select-text').html($e.html());
            //do something
        }
    })
 
    //点击区域是窗口，要收起有显示的下拉框
    $(document).bind('click',function(){
        var $sltlistall = $('.select-item');
        if($sltlistall.is(":visible")){
            $sltlistall.slideUp(200).prev().removeClass('list-show');
        }
    })
}
 
changeSelectFun();