javascript - code - dropdown menu jquery

использовать intro.js в выпадающем элементе начальной загрузки (3)

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

Я нашел похожий вопрос без ответа: IntroJS Bootstrap Menu не работает

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

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

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

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

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

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

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

/views/nav/body-create.html

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

<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>

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

Доказательство: проверьте вышеуказанный элемент в отладчике Chrome по ссылке http://recherche.utilitaire.melard.fr/#/carto . Введите в консоли следующее и нажмите ввод.

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

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

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

 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 без второго аргумента (миллисекунды) позволяет поставить функцию в очередь в цикле событий и запустить ее после обработки всех событий (включая щелчок, закрывающий раскрывающийся список), также лучше добавить открытый класс в раскрывающийся список, если Вы хотите установить его в открытое состояние

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

$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', я знаю это некрасиво, но я не нашел ничего лучшего в то время