在bootstrap下拉元素上使用intro.js

Question

我无法弄清楚如何在下拉元素上使用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函数的末尾添加一个断点,你就会理解我的意思......

Answer 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允许您在事件循环中对函数进行排队,并在处理完所有事件后运行它(包括关闭下拉列表),同样,最好将类打开添加到下拉列表中你想把它设置为打开状态

Answer 2

在你的模板中，即

/views/nav/body-create.html

您有一个代码，其中 ng-disabled 基于 !currentPath.name。currentPath.name 的值为 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链接中检查 chrome 调试器中的上述元素。在控制台中输入以下内容并按 Enter 键。

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

您的“Niveau”菜单开始工作。