Показать сообщение отдельно
  #3 (permalink)  
Старый 23.07.2019, 17:03
Новичок на форуме
Отправить личное сообщение для arinades Посмотреть профиль Найти все сообщения от arinades
 
Регистрация: 23.07.2019
Сообщений: 1

Как можно реализовать закрытие дива 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'));

});
Ответить с цитированием