Как можно реализовать закрытие дива dropdown при клике вне его области. Пытаюсь обычными средствами это реализовать, но, как показывает практика - клик на #dd-make (например) приводит к тому, что .dropdown не открывается. С уважением, Артём. HTML: <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> </div> Код (Javascript): 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')); });
Отследить клик вне элемента можно так Код (Javascript): var div = $('.dropdown'); if (!div.is(e.target) && div.has(e.target).length === 0) { // скрываем .dropdown }