фильтры

by Alexander Pankov

HTML

<ul class="places">
    <li> <a href=""><span class="dot">Гипермаркет</span></a>

    </li>
    <li> <a href=""><span class="dot">Спорт</span></a>

    </li>
    <li> <a href=""><span class="dot">Оджеда</span></a>

    </li>
    <li> <a href=""><span class="dot">Товары для дома</span></a>

    </li>
    <li> <a href=""><span class="dot">Развлечения</span></a>

    </li>
    <li><a href=""><span class="dot">Каффе и рестораны</span></li>
</ul>
    
    <!-- ШОБЫ при выборе не скакали соседнии (скачут зп-зп добавления крестика -->

CSS

.places {
    text-align: center;
}
.places li {
    display: inline-block;
    padding: 7px 12px;
    margin-right: 15px;
}
.places li a {
    display: inline-block;
    text-align: left;
    border: none;
}
.places li a {
    font-size: 18px;
    color: #71a1c4;
    text-align: center;
    padding-bottom: 2px;
    text-decoration: none;
}
.places li a span {
    border-bottom: 1px dotted #c1ddf1;
}
.places li a::after {
    display: inline-block;
    width: 22px; /* 15 + маргин 3*/
    content:"";
}
.places li.active {
    background: #90acbe;
    border: none;
    border-radius: 20px;
    padding-bottom: 7px;
}
.places li.active a {
    color: #fff;
    font-weight: normal;
}
.places li.active a span {
    border: none;
}
.places li.active img {
    display: inline;
    cursor: pointer;
    margin-left: 3px;
    vertical-align: middle;
}
.places li.active a::after {
  display: none !important;
}

JavaScript

$('.places li').click(function (event) {
        event.preventDefault();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').find('img').remove()
        } else {
            $(this).addClass('active').append('<img id="close_area" src="http://untca.ru/kollage/img/plan_close_nav.png" alt="">')
        };

    });

<!-- крестик 15 на 15 -->