За последние 24 часа нас посетили 20956 программистов и 1108 роботов. Сейчас ищут 437 программистов ...

Закрытие элемента вне дива

Тема в разделе "JavaScript и AJAX", создана пользователем afyodorov, 23 июл 2019.

  1. afyodorov

    afyodorov Новичок

    С нами с:
    23 июл 2019
    Сообщения:
    1
    Симпатии:
    0
    Как можно реализовать закрытие дива dropdown при клике вне его области. Пытаюсь обычными средствами это реализовать, но, как показывает практика - клик на #dd-make (например) приводит к тому, что .dropdown не открывается. С уважением, Артём.
    HTML:
    1. <div class="row">      
    2. <div class="col-sm-3 col-md-2">
    3. <div id="dd-make" class="wrapper-dropdown" tabindex="1">
    4.             <span>
    5.      <article> <img src="img/box.png">
    6.                 <span>
    7.                 бесплатная доставка
    8.                 </span>
    9.                 <p>от 1500 рублей</p>
    10.               </article>
    11.     </span>
    12.             <ul class="dropdown">
    13.             1
    14.             </ul>
    15.         </div>
    16.   </div>
    17. <div class="col-sm-3 col-md-2">
    18.         <div id="dd-model" class="wrapper-dropdown " tabindex="1">
    19.             <span>
    20.             <article> <img src="img/discount.png">
    21.                 <span>
    22.                 акции на товары недели
    23.                 </span>
    24.                 <p>скидки до -50%</p>
    25.               </article>
    26.             </span>
    27.             <ul class="dropdown">
    28.              2
    29.             </ul>
    30.         </div>
    31.   </div>
    32.   <div class="col-sm-3 col-md-2">
    33.         <div id="dd-year" style="margin-left:1%;" class="wrapper-dropdown " tabindex="1">
    34.             <span>
    35.  
    36.             <article>
    37.             <img src="img/cards.png">
    38.                 <span>
    39.                 условия оплаты
    40.                 </span>
    41.                 <p>способы оплаты</p>
    42.               </article>
    43.             </span>
    44.             <ul class="dropdown">
    45.              3
    46.             </ul>
    47.         </div>
    48.   </div>
    49.  
    50.   </div>
    Код (Javascript):
    1. function DropDown(el) {
    2.   this.dd = el;
    3.   this.placeholder = this.dd.children('span');
    4.   this.opts = this.dd.find('ul.dropdown > li');
    5.   this.val = '';
    6.   this.index = -1;
    7.   this.initEvents();
    8. }
    9.  
    10. DropDown.prototype = {
    11.   initEvents : function() {
    12.       var obj = this;
    13.         obj.dd.on('click', function(event){
    14.       $('.wrapper-dropdown').not(this).removeClass('active');
    15.         $(this).toggleClass('active');
    16.             return false;
    17.         });
    18.         obj.opts.on('click',function(){
    19.             var opt = $(this);
    20.             obj.val = opt.text();
    21.             obj.index = opt.index();
    22.             obj.placeholder.text(obj.val);
    23.         });
    24.     },
    25.     getValue : function() {
    26.         return this.val;
    27.     },
    28.     getIndex : function() {
    29.         return this.index;
    30.     }
    31. }
    32.  
    33. $(function() {
    34.   var ddMake = new DropDown( $('#dd-make') );
    35.   var ddModel = new DropDown( $('#dd-model'));
    36.   var ddYear = new DropDown( $('#dd-year') );
    37.   var ddSeries = new DropDown( $('#dd-series'));
    38.   var ddEngine = new DropDown( $('#dd-engine') );
    39.   var ddVariant = new DropDown( $('#dd-variant'));
    40.  
    41. });
     
  2. master-web

    master-web Новичок

    С нами с:
    29 май 2019
    Сообщения:
    44
    Симпатии:
    16
    Отследить клик вне элемента можно так
    Код (Javascript):
    1. var div = $('.dropdown');
    2. if (!div.is(e.target) && div.has(e.target).length === 0) {
    3. // скрываем .dropdown
    4. }