Как закрыть блок по второму клику?

Question

[Andrej Kopp]

Всем привет. У меня есть кнопка бургер-меню с анимацией. Вот пример https://codepen.io/sequelone/pen/OOromj

А вот мой JavaScript

jQuery(document).ready(function($) {
    var toggles = jQuery('.cmn-toggle-switch');

    toggles.on('click', function(e){
        e.preventDefault();
        jQuery(this).toggleClass("active");
    });

   var bsDefaults = {
         offset: false,
         overlay: true,
         width: '330px'
      },
      bsMain = $('.bs-offset-main'),
      bsOverlay = $('.bs-canvas-overlay');

   $('[data-toggle="canvas"][aria-expanded="false"]').on('click', function() {
      var canvas = $(this).data('target'),
         opts = $.extend({}, bsDefaults, $(canvas).data()),
         prop = $(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left';

      if (opts.width === '100%')
         opts.offset = false;
      
      $(canvas).css('width', opts.width);
      if (opts.offset && bsMain.length)
         bsMain.css(prop, opts.width);

      $(canvas + ' .bs-canvas-close').attr('aria-expanded', "true");
      $('[data-toggle="canvas"][data-target="' + canvas + '"]').attr('aria-expanded', "true");
      if (opts.overlay && bsOverlay.length)
         bsOverlay.addClass('show');
      return false;
   });

   $('.bs-canvas-close, .bs-canvas-overlay').on('click', function() {
      var canvas, aria;
      if ($(this).hasClass('bs-canvas-close')) {
         canvas = $(this).closest('.bs-canvas');
         aria = $(this).add($('[data-toggle="canvas"][data-target="#' + canvas.attr('id') + '"]'));
         if (bsMain.length)
            bsMain.css(($(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left'), '');
      } else {
         canvas = $('.bs-canvas');
         aria = $('.bs-canvas-close, [data-toggle="canvas"]');
         if (bsMain.length)
            bsMain.css({
               'margin-left': '',
               'margin-right': ''
            });
      }
      canvas.css('width', '');
      aria.attr('aria-expanded', "false");
      if (bsOverlay.length)
         bsOverlay.removeClass('show');
      return false;
   });
});

Нужно при клике по кнопке открывать канвас меню и при повторном нажатии закрывать. Сейчас работает только открытие.

А вот кнопка, по которой отдельно закрывается канвас меню.

<header class="bs-canvas-header p-3 bg-white overflow-auto">
                <button type="button" class="bs-canvas-close float-left close" aria-label="Close">
                        <span aria-hidden="true" class="text-dark">&times;</span>
                </button>
        </header>

Answer 1

[Andrej Kopp]

Задача решена:

jQuery(document).ready(function($) {
      $('.navbar-toggler').each(function () {
        $(this).click(function() {
          $('.navbar-toggler').toggleClass('active');
          $('.bs-canvas-overlay').toggleClass('show');
          $('.bs-canvas').toggleClass('active');;
          return false;
        })
    });

Также есть и другой вариант:

jQuery(document).ready(function($) {
       let bsDefaults = {
          offset: false,
          overlay: true,
          width: '330px'
       };
    
       let bsMain = $('.bs-offset-main');
       let bsOverlay = $('.bs-canvas-overlay');
    
       $('.nav-link-collapse').on('click', function() {
          $('.nav-link-collapse').not(this).removeClass('nav-link-show');
          $(this).toggleClass('nav-link-show');
       });
    
       let documentMenu = {
          isOpen: false,
          hamburgerToggle: () => {
             if (documentMenu.isOpen === false) {
                $('.cmn-toggle-switch').addClass("active");
                // documentMenu.open();
             } else {
                $('.cmn-toggle-switch').removeClass("active");
                // documentMenu.close();
             }
             documentMenu.isOpen = !documentMenu.isOpen;
          },
    
          open: () => {
             documentMenu.hamburgerToggle();
    
             let canvas = $('[data-toggle="canvas"][aria-expanded="false"]').data('target'),
                 opts = $.extend({}, bsDefaults, $(canvas).data()),
                 prop = $(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left';
    
             if (opts.width === '100%')
                opts.offset = false;
    
             $(canvas).css('width', opts.width);
             if (opts.offset && bsMain.length)
                bsMain.css(prop, opts.width);
    
             $(canvas + ' .bs-canvas-close').attr('aria-expanded', "true");
             $('[data-toggle="canvas"][data-target="' + canvas + '"]').attr('aria-expanded', "true");
             if (opts.overlay && bsOverlay.length)
                bsOverlay.addClass('show');
             return false;
          },
    
          close: () => {
             documentMenu.hamburgerToggle();
    
             let canvas, aria;
             let object = $('.bs-canvas-close, .bs-canvas-overlay');
             if ($(object).hasClass('bs-canvas-close')) {
                canvas = $(object).closest('.bs-canvas');
                aria = $(object).add($('[data-toggle="canvas"][data-target="#' + canvas.attr('id') + '"]'));
                if (bsMain.length)
                   bsMain.css(($(canvas).hasClass('bs-canvas-right') ? 'margin-right' : 'margin-left'), '');
             } else {
                canvas = $('.bs-canvas');
                aria = $('.bs-canvas-close, [data-toggle="canvas"]');
                if (bsMain.length)
                   bsMain.css({
                      'margin-left': '',
                      'margin-right': ''
                   });
             }
             canvas.css('width', '');
             aria.attr('aria-expanded', "false");
             if (bsOverlay.length)
                bsOverlay.removeClass('show');
             return false;
          }
       };
    
       $('.cmn-toggle-switch').on('click', function(e){
          e.preventDefault();
          if (documentMenu.isOpen === false)
             documentMenu.open();
          else
             documentMenu.close();
       });
    
       $('.bs-canvas-close, .bs-canvas-overlay').on('click', function() {
          documentMenu.close();
       });
    });