jQuery Collapse function throws error on upgrade of WordPress and PHP-CodePudding

I have upgraded an old WordPress site to the latest WordPress. PHP version was also upgraded. The site had a custom sidebar menu where opening and closing was controlled with a custom.js script. The menu no longer toggles.

After the upgrade the following error appeared in the console:

Uncaught TypeError: $submenu.collapse is not a function.

Not quite sure what the issue is.

jQuery('.menu-container li.menu-item-has-children').each(function() {
  var $this = jQuery(this);
  var $toggler = $this.find('a').first();
  var $submenu = $this.find('.sub-menu');

  $submenu.addClass('collapse');

  if ($submenu.find('.current_page_item').length > 0) {
    $submenu.addClass('in');
  }

  $toggler.on('touchstart click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $submenu.collapse('toggle');
  });

  $submenu.on('shown.bs.collapse', function() {
    $this.addClass('expanded');
  });

  $submenu.on('hidden.bs.collapse', function() {
    $this.removeClass('expanded');
  });
});

CodePudding user response：

Collapse is a bootstrap function. The boostrap in the old theme, the dependency was not properly done.

Before Fix

 wp_enqueue_script( 'secd-bootstrap-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20140319', true );
wp_enqueue_script( 'secd-bootstrap-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), $current_filemodtime );

After Fix

wp_enqueue_script( 'secd-bootstrap-custom', get_template_directory_uri() . '/js/custom.js', array('secd-bootstrap-bootstrap'), $current_filemodtime );