Как можно реализовать закрытие дива dropdown при клике вне его области? Пытаюсь обычными средствами это реализовать, но, как показывает практика - все выходит боком.
Пробовал сделать так, но ничего не выходит. И вещал на .wrapper-content, .dropdown - результат нулевый.
$(document).mouseup(function (e) {
var container = $(".dropdown");
if (container.has(e.target).length === 0){
container.hide();
}
});
Но
<div class="row">
<div class="col-sm-3 col-md-2">
<div id="dd-make" class="wrapper-dropdown" tabindex="1">
<span>
<article> <img src="img/box.png">
<span>
бесплатная доставка
</span>
<p>от 1500 рублей</p>
</article>
</span>
<ul class="dropdown">
1
</ul>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div id="dd-model" class="wrapper-dropdown " tabindex="1">
<span>
<article> <img src="img/discount.png">
<span>
акции на товары недели
</span>
<p>скидки до -50%</p>
</article>
</span>
<ul class="dropdown">
2
</ul>
</div>
</div>
<div class="col-sm-3 col-md-2">
<div id="dd-year" style="margin-left:1%;" class="wrapper-dropdown " tabindex="1">
<span>
<article>
<img src="img/cards.png">
<span>
условия оплаты
</span>
<p>способы оплаты</p>
</article>
</span>
<ul class="dropdown">
3
</ul>
</div>
</div>
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$('.wrapper-dropdown').not(this).removeClass('active');
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var ddMake = new DropDown( $('#dd-make') );
var ddModel = new DropDown( $('#dd-model'));
var ddYear = new DropDown( $('#dd-year') );
var ddSeries = new DropDown( $('#dd-series'));
var ddEngine = new DropDown( $('#dd-engine') );
var ddVariant = new DropDown( $('#dd-variant'));
});