如何在Bootstrap Tour启动时关闭Drupal 8站点的折叠菜单？

Got it, let's get this sorted for your Drupal 8 + Bootstrap 3 site! The goal is to automatically close those two navbar collapse menus (navbar-collapse-first and navbar-collapse-second) when the user clicks the "Commencer la visite" button to start the Bootstrap Tour.

How to Modify Your tour.js File #

The most reliable way is to use Bootstrap Tour's built-in onStart callback. This function runs the moment the tour begins, so we'll add code here to trigger Bootstrap's collapse method to shut your menus.

Here's your updated code, with key changes highlighted:

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;
                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\ <div class='arrow'></div>\ <h3 class='popover-title'></h3>\ <div class='popover-content'></div>\ <div class='popover-navigation'>\ <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\ <span data-role='separator'>|</span>\ <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\ <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\ </div>\ </div>",
              // New: Callback to close navbars when tour starts
              onStart: function() {
                // Use Bootstrap's native collapse method to hide menus
                $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
              }
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            $('#bs-tour-restart').click(function () {
              // Restart the tour
              tour.init();
              tour.restart();
            });

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }
        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };
})(window.jQuery, window._, window.Drupal, window.drupalSettings);

What This Does #

• The onStart callback triggers immediately when the tour launches—whether from the button click, page load, or a restart.
• We use Bootstrap 3's native collapse('hide') method to programmatically close both navbar elements. This works seamlessly with your existing Bootstrap setup.
• This ensures menus are out of the way right as the tour starts, giving users an unobstructed view of tour steps.

内容的提问来源于stack exchange，提问作者3cfe5693