Страница 1 из 1

Потеря фокуса - прячем DIV

СообщениеДобавлено: 04 апр 2015, 18:17
Samuilus
Привет ребята!
Подскажите пожалуйста как реализовать FOCUSOUT или blur
То есть юзер кликнул на button список открылся, он передумал нажал на какой нибудь другой объект значит .drop прячем

Вот написал :https://jsfiddle.net/6aLmfee7/

CSS:
Код: Выделить всё
button{
    display : block ;
    width : 200px ;
    text-align : left ;
    padding-left : 15px ;
    cursor : pointer ;
}
.drop{
    display : none;
    width : 198px ;
    border : 1px solid #ddd ;
}
.drop span{
    display : block ;
    padding-left : 15px ;
    color : #000 ;   
}
.drop span:hover{
    background : #008198 ;
    color : #fff ;
    cursor : pointer ;
}


JS:
Код: Выделить всё
$(".btn").click(function(){
    $(".drop").toggle();
});

$(".drop span").click(function(){
    var Item = $(this).data('item') ;
    var Text = $(this).text();
   
    $(".btn span").html(Text);
    $(".btn span").attr('data-item',Item);
    $(".drop").hide();
});


HTML:
Код: Выделить всё
<div class="box">
    <button class="btn">
        <span data-item="0">Item-0</span>
    </button>   
<div class="drop">
    <span data-item="0">Item-0</span>
    <span data-item="1">Item-1</span>
    <span data-item="2">Item-2</span>
</div>   
   
</div>


Спасибо заранее