Верстка элемента

299

27 августа 2017, 02:34

Всем привет, помогите пожалуйста, возникла проблема, есть выпадающая менюшка, при нажатии нужно чтобы не слетало выделение после того как отпускаешь кнопку, когда элемент меню активен. Не знаю вообще как реализовать((

как сейчас:

как надо:

.filter { 
	width:100%; 
	display: flex; 
	background: #e0c9a4; 
	margin: 0 0 11px; 
	position: relative; 
	white-space: nowrap; 
	justify-content: space-between; 
 } 
 
.filter__sort { 
	width: 180px; 
	float: left; 
	margin: 4px 6px 0 0; 
 } 
 
.filter__multi { 
	background: #fff; 
	display: inline-block; 
	width: 140px; 
	position: relative; 
 } 
 
.filter__multi-select { 
	text-transform: uppercase; 
	background-color: #e0c9a4; 
	color: #000; 
	cursor: pointer; 
	display: block; 
	font: 14px/22px "Cuprum",Arial,Helvetica,sans-serif; 
	padding: 0 25px 0 6px; 
	position: relative; 
	white-space: nowrap; 
	text-overflow: ellipsis 
 } 
 
 .filter__multi-select:active{ 
 	background-color: #00a4c0; 
 } 
 
.filter__multi-select-clear,.filter__multi-select:after { 
	content: "▸"; 
	width: 22px; 
	height: 22px; 
	position: absolute; 
	right: 0; 
	top: 0; 
	background-color: #02748f; 
	color: #81edf7; 
	text-align: center; 
 } 
 
 
.filter__multi-list,.filter__multi-select:active:after{ 
	content: "▾"; 
} 
 
.filter__multi-select-clear { 
	background: #02748f url(/images/svg/btn-close.svg) no-repeat center/18px 18px; 
	display: none; 
	z-index: 1 
 } 
 
.filter__multi-list { 
	background-color: #00a4c0; 
	color: #fff; 
	display: none; 
	font-size: 14px; 
	position: absolute; 
	left: -4px; 
	top: 100%; 
	line-height: 15px; 
	z-index: 65; 
	max-width: 250px; 
 } 
 
.filter__multi-list--price {width: 245px} 
 
.filter__multi-list--vendor {width: 550px; 
left: 0px !important;} 
 
.filter__multi-content { 
	margin-bottom: 40px; 
	overflow-y: auto; 
	max-height: 300px 
 } 
 
.filter__multi-content--price { 
	height: 50px; 
	padding: 10px 28px; 
	overflow: hidden 
 } 
 
.filter__multi-items { 
	padding: 0; 
	margin: 10px 0; 
	overflow: hidden 
 } 
 
.filter__multi-item { 
	line-height: 20px; 
	list-style: outside none none; 
	padding: 5px 15px; 
	text-transform: uppercase; 
	float: left; 
	width: 215px; 
	white-space: nowrap 
 } 
 
.filter__multi-item--vendor {width: 265px} 
 
.filter__multi-footer { 
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100%; 
	height: 40px; 
	text-align: center; 
 } 
 
.filter__price {display: inline-block;margin:5px 11px 5px 3px} 
 
.filter__price-span { 
	margin-right: 15px; 
	float: left; 
	position: relative; 
	top: 3px 
 } 
 
.filter__price-single { 
	text-align: center; 
	color: #6e0516; 
	margin-top: 7px 
 } 
 
.filter__clear { 
	background: url(/images/btn-close.png) no-repeat center center/cover; 
	color: #6e0516; 
	display: block; 
	position: absolute; 
	right: 5px; 
	top: 4px; 
	width: 17px; 
	height: 17px 
 } 
 
.filter__button { 
	height: 24px!important; 
	margin: 8px 0 0px 0px; 
	text-transform: uppercase; 
	background: #02748f; 
	line-height: 24px; 
	color: #fff; 
	border: none; 
	padding: 0 15px!important; 
	display: inline-block; 
	width: 90% 
 } 
 
	.filter__button:hover {color: #d8b070}

<div class="filter__multi js-select-element js-filter js-filter-disablable" data-type="Вендор" data-id="1"> 
                    <div class="filter__multi-select js-select-title"> 
                        <span class="js-filter-title">Вендор</span> 
                        <span class="filter__multi-select-clear js-clear-filter"></span> 
                    </div> 
                    <div class="filter__multi-list filter__multi-list--vendor m-manufacturer js-select-content"> 
                        <div class="filter__multi-content"> 
                            <ul class="filter__multi-items"> 
                                 
                                 
                                <li class="filter__multi-item filter__multi-item--vendor js-filter-item-holder"> 
                                    <input id="li483" class="checkbox-input js-filter-item js-prop-483" data-name="California Exotic Novelties, США" name="prop1" value="483" type="checkbox"> 
                                    <a class="checkbox-label js-filter-link js-prop-label" href="#">California Exotic Novelties, США</a> 
                                </li> 
                                 
                                <li class="filter__multi-item filter__multi-item--vendor js-filter-item-holder"> 
                                    <input id="li507" class="checkbox-input js-filter-item js-prop-507" data-name="Pjur, Германия" name="prop1" value="507" type="checkbox"> 
                                    <a class="checkbox-label js-filter-link js-prop-label" href="#">Pjur, Германия</a> 
                                </li> 
                                 
                                <li class="filter__multi-item filter__multi-item--vendor js-filter-item-holder"> 
                                    <input id="li509" class="checkbox-input js-filter-item js-prop-509" data-name="Screaming, США" name="prop1" value="509" type="checkbox"> 
                                    <a class="checkbox-label js-filter-link js-prop-label" href="#">Screaming, США</a> 
                                </li> 
                                 
                                <li class="filter__multi-item filter__multi-item--vendor js-filter-item-holder"> 
                                    <input id="li829" class="checkbox-input js-filter-item js-prop-829" data-name="XR Brands, США" name="prop1" value="829" type="checkbox"> 
                                    <a class="checkbox-label js-filter-link js-prop-label" href="#">XR Brands, США</a> 
                                </li> 
                                 
                                <li class="filter__multi-item filter__multi-item--vendor js-filter-item-holder"> 
                                    <input id="li516" class="checkbox-input js-filter-item js-prop-516" data-name="Роспарфюм, Польша" name="prop1" value="516" type="checkbox"> 
                                    <a class="checkbox-label js-filter-link js-prop-label" href="#">Роспарфюм, Польша</a> 
                                </li> 
                                 
                                 
                            </ul> 
                        </div> 
                        <div class="filter__multi-footer"> 
                            <input type="submit" class="filter__button" value="Применить"> 
                        </div> 
                    </div> 
                </div>

Answer 1

Возможно вас такой ответ не устроит, но вот есть такое решение этого вопроса с помощью js https://jsbin.com/vugupitevo/5/edit?html,js,output:

var select = document.querySelector('.filter__multi-select');
select.addEventListener('click', function(e){
  var classList = e.currentTarget.classList;
  if(classList.contains('active')){
    classList.remove('active');
  } else {
    classList.add('active');
  }
});

При этом css селекторы должны соответственно заменены:

.filter__multi-select:active на .filter__multi-select.active

.filter__multi-list,.filter__multi-select:active:after на .filter__multi-list,.filter__multi-select.active:after

Answer 2

Попробуйте  
 .filter__multi-select:active{
    background-color: #00a4c0;
 }
заменить на   
.filter__multi-select:active{
    background-color:#e0c9a4;
 }