Select

by AJIEKCEU

HTML

<div class="ticket_selected_b left">
    <a href="" class="ticket__time_b ticket__time_a js_ticket__time">
        <div class="ticket__time_i left">												
            <div class="ticket_time ticket__time_with">13:30</div>
            <i class="sp ticket_time_arrow "></i>
        </div>
        <div class="ticket__time_i left">
            <div class="ticket_time ticket__time_to">04:22</div>
        </div>
    </a>
    
    <ul class="ticket__time_list">
        <li class="ticket_select_time_i">
            <a href="" class="ticket_select_time_a js_select_time">
                <div class="ticket__time_i left">
                    <div class="ticket_time ticket__time_with">13:30</div>
                    <i class="sp ticket_time_arrow "></i>
                </div>
                <div class="ticket__time_i  left">
                    <div class="ticket_time ticket__time_to">03:30</div>
                </div>
            </a>
        </li>
        <li class="ticket_select_time_i">
            <a href="" class="ticket_select_time_a active js_select_time">
                <div class="ticket__time_i left">
                    <div class="ticket_time ticket__time_with">15:30</div>
                    <i class="sp ticket_time_arrow "></i>
                </div>
                <div class="ticket__time_i left">
                    <div class="ticket_time ticket__time_to">21:30</div>
                </div>
            </a>
        </li>
        <li class="ticket_select_time_i">
            <a href="" class="ticket_select_time_a js_select_time">
                <div class="ticket__time_i left">
                    <div class="ticket_time ticket__time_with">16:30</div>
                    <i class="sp ticket_time_arrow "></i>
                </div>
                <div class="ticket__time_i left">
                    <div class="ticket_time ticket__time_to">11:30</div>
                </div>
            </a>
        </li>
        <li class="ticket_select_time_i">
    ...

CSS

.ticket__time_b{margin-bottom:8px;position:relative;background-color: #40454F;width: 350px;margin-right: 20px;}
.ticket__time_a{height: 37px;text-decoration: none !important;color: #fee75d;display: block;overflow: hidden;}
.ticket_selected{position: relative; width: 350px; left: -7px; top: -8px;} 
.ticket_selected .ticket__time_a{-webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; -o-border-radius: 4px 4px 0px 0px; -ms-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; padding: 7px 0 0 7px; height: 48px;}
.ticket__time_list{display: none;position: absolute; top: 46px; padding: 5px 0 0 7px; z-index: 3; width: 350px; background-color: #40454F; }
.ticket__time_list .ticket_time_date {top: 6px;left: 7px;}
.ticket_selected .ticket__time_list{display: block;}
.ticket_select_time_i .ticket__time_i{width: 125px; height: 20px;overflow: hidden;position: relative; } 
.ticket_select_time_i {margin: 13px 0;overflow: hidden;} 
.ticket_select_time_a{} 
.ticket__time_b  .ticket__time_i{width: 125px;height: 37px;overflow: hidden;position: relative;}
.ticket__location{font-size: 11px;color: #fee75d;line-height: 1em;margin-bottom: 3px;}
.ticket_time{font-size: 19px;color: #fee75d;display: inline-block;line-height: 1em;float: left;}
.ticket__time_i .circle_arrow{position: absolute; top: 17px; left: 54px;} 
.ticket_time_date {font-size: 11px;color: #737e8e;line-height: 1em;position: relative;top: 7px;left: 24px;max-width: 40px; overflow: hidden; white-space: nowrap;} 
.ticket__time_b .ticket_time_arrow{width: 49px;height: 5px;overflow: hidden;position: absolute; top: 21px; left: 58px; }
.left {float: left;}
.ticket_select_time_a{display: block;overflow: hidden;}
.ticket_select_time_a.active{background-color: #AD5252;}

JavaScript

var  ticket__time = $(".js_ticket__time"), 
    select_time = $(".js_select_time");

    ticket__time.click(function(e) {                            $(this).addClass("active").parents(".ticket_selected_b").toggleClass("ticket_selected").siblings().removeClass("ticket_selected");
        e.preventDefault();
    }); 
select_time.click(function(e) {
    $(this).closest(".ticket__time_list").find(".js_select_time").removeClass("active"); // удалить у ссылок класс эктив, только в этом списке
    var get_time_with = $(this).find(".ticket__time_with").text();
    var get_time_to = $(this).find(".ticket__time_to").text();
    $(this).addClass("active").parents(".ticket_selected_b").removeClass("ticket_selected");
    $(this).parents(".ticket_selected_b").find(".ticket__time_b .ticket__time_with").text(get_time_with);
    $(this).parents(".ticket_selected_b").find(".ticket__time_b .ticket__time_to").text(get_time_to);
    e.preventDefault();
});