1

次のhtml/cssとjQueryを使用して、カスタマイズされた選択ボックスを作成しました。

div.selectBox {
    position:relative;
    display:inline-block;
    cursor:default;
    text-align:left;
    line-height:30px;
    clear:both;
    color:#888;
}
span.selected {
    width:167px;
    text-indent:20px;
    border:1px solid #ccc;
    border-right:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    background:#f6f6f6;
    overflow:hidden;
}
span.selectArrow {
    width:30px;
    border:1px solid #60abf8;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    text-align:center;
    font-size:20px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background:#4096ee;
}

span.selectArrow,span.selected {
    position:relative;
    float:left;
    height:30px;
    z-index:1;
}
div.selectOptions {
    position:absolute;
    top:28px;
    left:0;
    width:198px;
    border:1px solid #ccc;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    overflow:hidden;
    background:#f6f6f6;
    padding-top:2px;
    display:none;
}

span.selectOption {
    display:block;
    width:80%;
    line-height:20px;
    padding:5px 10%;
}

span.selectOption:hover {
    color:#f6f6f6;
    background:#4096ee;         
}

およびjQuery:

$('div.selectBox').each(function(){
        $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
    $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

    $(this).children('span.selected,span.selectArrow').click(function(){
        if($(this).parent().children('div.selectOptions').css('display') == 'none'){
            $(this).parent().children('div.selectOptions').css('display','block');
        }
        else
        {
            $(this).parent().children('div.selectOptions').css('display','none');
        }
    });

    $(this).find('span.selectOption').click(function(){
        $(this).parent().css('display','none');
        $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
    });
});

しかし、選択ボックスの矢印をクリックすると、リストが表示されます。ただし、同じ矢印をクリックした場合にのみ閉じます。ページの他の部分をクリックしたときにリストを閉じるように実装するにはどうすればよいですか?

HTML

<div class='selectBox'>
    <span class='selected'></span>
    <span class='selectArrow'>&#9660</span>
    <div class="selectOptions" >
        <span class="selectOption" value="Option 1">Option 1</span>
        <span class="selectOption" value="Option 2">Option 2</span>
        <span class="selectOption" value="Option 3">Option 3</span>
    </div>
</div>
4

2 に答える 2

3

ドキュメントのクリックを使用して非表示にします.selectOptions:

$(document).unbind('click');
$(document).click(function(event){
    if($(event.target).closest('div.selectBox').length == 0) {
         $('.selectOptions').hide();                
    }
});

作業例: http://jsfiddle.net/FBuKG/

于 2012-09-17T06:59:31.687 に答える
0

試す

$('body').click(function() {
    if($('div.selectOptions').css('display') != 'none'){
        $('div.selectOptions').css('display','none');
    }
});
于 2012-09-17T05:51:29.213 に答える