自定义jQuery模态插件-打开和关闭多个模态

我为一个模态类型面板创建了一个自定义插件。此面板类似于从视口侧面打开的抽屉。该插件非常适合只显示一个插件的基本需求。但现在我需要改进插件，以允许打开一个接一个的双面板。到目前为止效果不错。 我遇到的问题是在关闭顶部面板/模式时。动作是关闭两个面板。我只希望它关闭顶部的面板，并使第一个面板保持打开状态。 我提供了一个链接到一个代码笔，我放在一起，显示我的问题。 确保打开两个面板，然后当关闭顶部面板时，当我希望一次关闭一个面板时，您将看到两个面板都关闭

我不是在这里粘贴CSS，因为您将在代码笔中看到完整的功能示例。 查看出现问题的

closeDrawer

函数

大抽屉
四分之三大
四分之三抽屉-父母

打开儿童抽屉
取消
三分之二抽屉-中等
儿童抽屉
取消
（函数（$）{
$.fn.psDrawerDeux=函数（选项）{
变量pluginDefaults={
init:function（）{}，
数据：“”
};
var options=$.extend（pluginDefaults，options）；
var触发器=此；
var triggerTarget=$（trigger.attr（'data-target-drawer'）；
var paureropen=false；
var drawerroverlay=trigger.attr（'data-drawer-superposer'）；
var-drawerSize=trigger.attr（'data-drawer-size'）；
var staticbackground=trigger.attr（'data-static-background'）；
var parentDrawer=trigger.attr（'data-parent-drawer'）；
setTimeout（函数（）{
$（'.drawer deux'）.removeClass（'collapse'）；
}, 500);
如果（抽屉大小=='xl'）{
triggerTarget.children（'.drawer content'）.addClass（'size-large'）；
如果（$（窗口）.width（）>=768）{
drawerroverlay=true；
}
}else if（抽屉大小==='md'）{
triggerTarget.children（'.drawer content'）.addClass（'size-medium'）；
}
if（抽屉式货架）{
如果（$（窗口）.width（）>=768）{
triggerTarget.find（'.drawer content'）.addClass（'delay'）；
}
}否则{
triggerTarget.find（'.drawer superposer'）.remove（）；
}
在（'click'，函数（e）上触发{
e、 预防默认值（）；
console.log（'Open！'）；
options.init（options.data）；
triggerTarget.children（'.drawer superposer，.drawer content'）.toggleClass（'active'）；
if（drawerSize=='xl'）$（'body'）.addClass（'drawer-open'）；
if（parentDrawer）triggerTarget.children（'.drawer supplicator，.drawer content'）.addClass（'parent-drawer'）；
paureropen=true；
控制台日志（抽屉式）；
triggerTarget.find（'a.drawer-close'）.focus（）；
});
triggerTarget.children（'.drawer content'）。查找（'.drawer close，[close drawer]'）。打开（'click'，函数（e）{
e、 预防默认值（）；
触发器closeDrawer（）；
});
triggerTarget.children（'.drawer superposer'）。on（'click'，function（）{
trigger.checkStatic（）；
});
$（文档）。在（'单击'）上，函数（e）{
var drawerContentRight=$（'.drawer content.active'）.css（'right'）；
if（（！$（e.target）.closest（'.drawer content.active'）.length）和&drawerContentRight==='0px'）{
trigger.checkStatic（）；
}
});
$（文档）.keyup（函数（e）{
如果（抽屉式）{
如果（e.key=='Escape'）{
trigger.checkStatic（）；
}
}
});
trigger.checkStatic=函数（）{
如果（staticbackground==='true'）{
}否则{
触发器closeDrawer（）；
}
}
trigger.closeDrawer=函数（）{
triggerTarget.children（'.drawer content'）.removeClass（'active'）；
if（抽屉式货架）{
setTimeout（函数（）{
triggerTarget.children（'.drawer superposer'）.addClass（'fade-out'）；
}, 200);
setTimeout（函数（）{
triggerTarget.children（'.drawer superposer'）.removeClass（'fade-out-active'）；
}, 400);
}否则{
triggerTarget.children（'.drawer superposer'）.removeClass（'active'））
}
$（'body'）.removeClass（'drawer-open'）；
paureropen=false；
setTimeout（函数（）{
trigger.focus（）；
triggerTarget.find（'form'）.trigger（'reset'）；
triggerTarget.find（'select'）。trigger（'change'）；
}, 400);
}
归还这个；
};
}（jQuery））；
$（函数（）{
$（“#大抽屉”）.psDrawerDeux（）；
$（'child#u drawer'）.psdrawerdex（）；
});

我可能已经解决了这个问题，但在关闭第二个模式时仍然出现控制台错误。请参见上面链接中的更新代码笔，以便自己查看。确保CodePen JS控制台打开以查看错误：

uncaughttypeerror:无法读取未定义的属性“children”

。这是因为它在关闭第二个模态时循环。

<header>
  <div class="navbar navbar-dark bg-dark shadow-sm"></div>
</header>
<div class="container">

  <div class="row">
    <div class="col text-center">
      <button class="btn btn-primary" id="large_drawer" data-target-drawer="#drawer_parent" data-drawer-size="xl" data-parent-drawer="true">Large Parent Drawer</button>
    </div>
  </div>

</div>

<!-- parent drawer -->
<div class="drawer-deux collapse" id="drawer_parent">
  <div class="drawer-superposer"></div>
  <div class="drawer-content">
    <div class="drawer-item first-item">
      <a class="drawer-close" href="#">
        <i class="material-icons font-xxl black">close</i>
      </a>
    </div>
    <div class="drawer-item">
      <div class="drawer-row">
        <header class="drawer-header">
          <a class="drawer-close" href="#">
            <i class="material-icons font-xxl black">close</i>
          </a>
          <h1>Three Quarter - Large</h1>
        </header>

        <div class="drawer-main">
          <p>Three Quarter Drawer - Parent</p>

          <div class="row">
            <div class="col">
              <button class="btn btn-primary" id="child_drawer" data-target-drawer="#drawer_child" data-drawer-size="md" data-drawer-superposer="true">Open Small Child Drawer</button>
            </div>
          </div>
        </div>
      </div>

      <div class="drawer-row">
        <button class="btn" close-drawer>Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- child drawer -->
<div class="drawer-deux collapse" id="drawer_child">
  <div class="drawer-superposer"></div>
  <div class="drawer-content">
    <div class="drawer-item first-item">
      <a class="drawer-close" href="#">
        <i class="material-icons font-xxl black">close</i>
      </a>
    </div>
    <div class="drawer-item">
      <div class="drawer-row">
        <header class="drawer-header">
          <a class="drawer-close" href="#">
            <i class="material-icons font-xxl black">close</i>
          </a>
          <h1>Two Third Drawer - Medium</h1>
        </header>

        <div class="drawer-main">
          <h2>Child Drawer</h2>
        </div>
      </div>

      <div class="drawer-row">
        <button class="btn" close-drawer>Cancel</button>
      </div>
    </div>
  </div>
</div>

(function ($) {

  $.fn.psDrawerDeux = function (options) {

    var pluginDefaults = {
      init: function () { },
      data: ''
    };

    var options = $.extend(pluginDefaults, options);

    var trigger = this;
    var triggerTarget = $(trigger.attr('data-target-drawer'));
    var drawerOpen = false;
    var drawerOverlay = trigger.attr('data-drawer-superposer');
    var drawerSize = trigger.attr('data-drawer-size');
    var staticBackdrop = trigger.attr('data-static-backdrop');
    var parentDrawer = trigger.attr('data-parent-drawer');

    setTimeout(function () {
      $('.drawer-deux').removeClass('collapse');
    }, 500);

    if (drawerSize === 'xl') {
      triggerTarget.children('.drawer-content').addClass('size-large');

      if ($(window).width() >= 768) {
        drawerOverlay = true;
      }

    } else if (drawerSize === 'md') {
      triggerTarget.children('.drawer-content').addClass('size-medium');
    }

    if (drawerOverlay) {
      if ($(window).width() >= 768) {
        triggerTarget.find('.drawer-content').addClass('delay');
      }
    } else {
      triggerTarget.find('.drawer-superposer').remove();
    }

    trigger.on('click', function (e) {
      e.preventDefault();

      console.log('Open!');

      options.init(options.data);

      triggerTarget.children('.drawer-superposer, .drawer-content').toggleClass('active');

      if (drawerSize === 'xl') $('body').addClass('drawer-open');

      if (parentDrawer) triggerTarget.children('.drawer-superposer, .drawer-content').addClass('parent-drawer');

      drawerOpen = true;

      console.log(drawerOpen);

      triggerTarget.find('a.drawer-close').focus();
    });

    triggerTarget.children('.drawer-content').find('.drawer-close, [close-drawer]').on('click', function (e) {
      e.preventDefault();
      trigger.closeDrawer();
    });

    triggerTarget.children('.drawer-superposer').on('click', function () {
      trigger.checkStatic();
    });

    $(document).on('click', function (e) {
      var drawerContentRight = $('.drawer-content.active').css('right');

      if ((!$(e.target).closest('.drawer-content.active').length) && drawerContentRight === '0px') {
        trigger.checkStatic();
      }
    });

    $(document).keyup(function (e) {
      if (drawerOpen) {
        if (e.key === 'Escape') {
          trigger.checkStatic();
        }
      }
    });

    trigger.checkStatic = function () {
      if (staticBackdrop === 'true') {

      } else {
        trigger.closeDrawer();
      }
    }

    trigger.closeDrawer = function () {

      triggerTarget.children('.drawer-content').removeClass('active');

      if (drawerOverlay) {
        setTimeout(function () {
          triggerTarget.children('.drawer-superposer').addClass('fade-out');
        }, 200);

        setTimeout(function () {
          triggerTarget.children('.drawer-superposer').removeClass('fade-out active');
    }, 400);
      } else {
        triggerTarget.children('.drawer-superposer').removeClass('active')
      }

      $('body').removeClass('drawer-open');
      drawerOpen = false;

      setTimeout(function () {
        trigger.focus();
        triggerTarget.find('form').trigger('reset');
        triggerTarget.find('select').trigger('change');
      }, 400);
    }

    return this;
  };
}(jQuery));

$(function() {
  $('#large_drawer').psDrawerDeux();
  $('#child_drawer').psDrawerDeux();
});