lvd_ dropdown

by Luong Dung

HTML

<div class="efe-list-style state">
    <span>STATE</span>
     <i class="efe-drop-arrow fa fa-caret-down">v</i>
     <ul class="efe-dropdown">
        <li data-value="0">STATE 0</li>
        <li data-value="1">STATE 1</li>
        <li data-value="2">STATE 2</li>
        <li data-value="3">STATE 3</li>
        <li data-value="4">STATE 4</li>
    </ul>
   	<input class="_efe_data" type="hidden">
</div>

CSS

.efe-list-style{
    position: relative;
    background: #336699;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}
.efe-dropdown{
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    background: #2c5987;
    width: 100%;
    z-index: 10;
    display: none;
}
.efe-dropdown.active{
    display: block;
}
.efe-list-style span{
    display: block;
    font-size: 20px;
    padding: 15px 40px 15px 5px;
}
.efe-list-style span, .efe-dropdown li{
    font-size: 20px;
    font-family: "nirmala",sans-serif;
}
.efe-dropdown li{
    padding: 15px 5px;
    border-bottom: 1px solid #25486b;
}
.efe-dropdown li:hover{
    background: #25486b;
}
.efe-drop-arrow{
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    bottom: 0;
    padding: 0 10px;
    background: #032445;
    color: #fff;
    font-size: 2em;

    border-radius: 5px;
    line-height: 55px;
}
.efe-drop-arrow:hover{
    background: #053564;
}

JavaScript

$(function(){
    /*
    * Function create dropdown box
    * by EFE Team
    * License EFE @ 2016
    */
    var $main_drop = $('.efe-drop-arrow');
    var $store_data = $('._efe_data');
    var $show_data = $('span');
    var $item_click = $('.efe-dropdown li');
    var $dropdowns = $('.efe-dropdown');

    $main_drop.on('click', function(e){
        var $dropdown = $(this).next('.efe-dropdown');
        if($(e.target).is(this)){
            $dropdowns.removeClass('active');
            if($dropdown.hasClass('active')){
                $dropdown.removeClass('active');
            }else{
                $dropdown.addClass('active');
            }
        }
        
    });
    $show_data.on('click', function(e){
        var $dropdown = $(this).parents('.efe-list-style').children('.efe-dropdown');
        $dropdowns.removeClass('active');
        if($(e.target).is(this)){
            if($dropdown.hasClass('active')){
                $dropdown.removeClass('active');
            }else{
                $dropdown.addClass('active');
            }
        }
    });

    $(document).on('click', function(e){
        var $dropdown = $('.efe-dropdown');
        if(!$(e.target).is($main_drop) && !$(e.target).is($show_data)){
            $dropdown.removeClass('active');
        }
    });

    $item_click.on('click', function(){
        var data_value = $(this).attr('data-value');
        var data_show = $(this).text();
        var $store_data = $(this).parents('.efe-list-style').children('._efe_data');
        var $show_data = $(this).parents('.efe-list-style').children('span');
        var $dropdown = $(this).parents('.efe-list-style').children('.efe-dropdown');
        $show_data.text(data_show);
        $store_data.val(data_value);
        $dropdown.removeClass('active');
    });
    /*//////////END Function create dropdown/////////*/
});