在引导下拉元素上使用 intro.js答案

【问题标题】：use intro.js on bootstrap dropdown element在引导下拉元素上使用 intro.js
【发布时间】：2014-04-21 10:29:10
【问题描述】：

我不知道如何在下拉元素上使用 intro.js。

我在那里发现了一个没有答案的类似问题：IntroJS Bootstrap Menu doesnt work

如果您想重现错误，请按以下步骤操作：

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函数的最后加上一个断点，你就会明白我的意思了……

【问题讨论】：

您能否大致描述一下您的解决方法？我有同样的问题，但我不明白你的解决方法。
您的第二个链接已损坏。
好的，感谢通知，已更正
也许你的代码在你最初发布之后已经改变了，但是当我加载recherche.utilitaire.melard.fr/#/carto时，我在控制台中看到了很多 JS 错误。
这个变通方法看起来像个 hack。似乎在 500 毫秒后将 display:none 更改为 display: block。

标签： javascript jquery twitter-bootstrap drop-down-menu navbar

【解决方案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 允许您在事件循环上排队函数并在处理所有事件后运行它（包括单击关闭下拉菜单），另外，最好将类添加到如果您想将其设置为打开状态的下拉菜单

【讨论】：

OPs 应用程序基于 AngularJS。您的解决方案不是“Angular Way”，而是“jQueriesh”。他的问题很简单。
我同意 bhantol，不是 angularJS 解决方案
对于使用 Bootstrap 版本 > 4.0 或在 2018 年阅读此内容的任何人，添加“open”类似乎不再起作用，但现在有 jquery 方法：$('#mydropdown').dropdown('toggle'); 打开和关闭它：getbootstrap.com/docs/4.0/components/dropdowns/#methods

【解决方案2】：

在您的模板中，即在

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

确保您有正确的名称或使用不同的条件 - 我不确定您要对条件做什么。

证明：在您的 recherche.utilitaire.melard.fr/#/carto 链接中检查 chrome 调试器中的上述元素。在控制台中输入以下内容并回车。

$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将元素2的style.display的状态设置为''，所以我点击后稍等一下，以便将其设置回'block' ，我知道它很丑，但我当时没有找到更好的东西

【讨论】：

【解决方案4】：

这是因为固定位置.. 通过使用 CSS，将父项的位置从固定更改为绝对，并且效果很好。例如： .sidebar 的位置是固定的，就这样吧。将 .sidebar.introjs-fixParent 的位置更改为绝对位置。

希望对你有帮助

【讨论】：