Использовать intro.js в раскрывающемся элементе bootstrap

Я не могу понять, как использовать intro.js для выпадающих элементов.

Я нашел аналогичный вопрос без ответа там: Меню IntroJS Bootstrap не работает

Если вы хотите воспроизвести ошибку, выполните следующие действия:

http://recherche.utilitaire.melard.fr/#/carto

Вам нужно нажать "Aide" (зеленая кнопка в правом верхнем углу), проблема возникает для второго шага. в событии изменения я делаю:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
    } 
    console.log("Change Event called"); 
};

При отладке все работает как шарм, пока эта функция не закончится: _showElement После этого я теряюсь в событиях JQuery, и выпадающее окно закрывается...

Если вы хотите воспроизвести, просто добавьте точку останова в конце функции _showElement, и вы поймете, что я имею в виду...

Ответы

Ответ 1

Здесь более четкое решение

 function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: "#mydropdown",
            intro: "This is a dropdown"
          },
          {
            element: '#mydropdownoption',
            intro: "This is an option within a dropdown.",
            position: 'bottom'
          },

        ]
      });

      intro.onbeforechange(function(element) {
        if (this._currentStep === 1) {
          setTimeout(function() {
            $("#mydropdown").addClass("open");
          });
        }
      });
      intro.start();
  };

  $(document).ready(function() {
    setTimeout(startIntro,1500);
  });

Обратите внимание, что setTimeout без второго аргумента (миллисекунды) позволяет вам ставить в очередь функцию в цикле событий и запускать ее после обработки всех событий (включая щелчок, закрывающий раскрывающийся список), также лучше добавить класс, открытый для выпадающий список, если вы хотите установить его для открытия состояния

Ответ 2

В шаблоне, т.е. в

/views/nav/body-create.html

У вас есть код, где ng-disabled основан на! currentPath.name. И значение currentPath.name равно null. Попробуйте проверить значение на следующем элементе. Вы увидите, что оно равно null.

<button class="dropdown-toggle btn btn-sm btn-default no-radius" ng-disabled="!currentPath.name">
                Niveau{{currentPath.level?": "+currentPath.level:""}} <strong><b class="caret"></b>
                                                          </strong>
</button>

Убедитесь, что у вас есть собственное имя или вы используете другое условие - я не уверен, что вы пытаетесь сделать с условием.

Доказательство. Проверьте этот элемент в хром-отладчике на recherche.utilitaire.melard.fr/#/carto. Введите следующую команду в консоли и нажмите enter.

$scope.currentPath.name='Hello You';

И ваше меню "Niveau" начнет работать.

Ответ 3

Я нашел обходное решение, это довольно уродливо, но делает работу:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
        setTimeout(function () {
            document.getElementById('step2').style.display = 'block';
        }, 500);
    } 
    console.log("Change Event called"); 
};

Я установил атрибут отображения для блокировки сразу после события клика, которое я добавил в событии изменения

При нажатии на щелчок элемента 1 я заметил, что jquery задал состояние style.display элемента 2 в '', поэтому я немного подождал, щелкнув, чтобы вернуть его в 'block', Я знаю это уродливо, но в то время я не нашел ничего лучшего