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

我无法弄清楚如何在下拉元素上使用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。 尝试检查以下元素的值。 你会看到它是null。

  Niveau{{currentPath.level?": "+currentPath.level:""}}    

确保你有正确的名字或使用不同的条件 – 我不确定你是怎么做的条件。

certificate：在recherche.utilitaire.melard.fr/#/carto链接中检查chrome调试器中的上述元素。 在控制台中键入以下内容并按Enter键。

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

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

Answer 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"); }; 

我将display属性设置为在更改事件中添加的click事件之后阻止

当点击执行元素1的单击时，我注意到jquery将元素2的style.display的状态设置为”，所以我等了一下点击以便将它设置回’block’，我知道这很难看，但当时我没有找到更好的东西

Answer 4

这是因为固定位置而发生的。通过使用CSS，将父项的位置从固定更改为绝对，并且它可以完美地工作。 例如： .sidebar的位置是固定的，保持不变 。 将.sidebar.introjs-fixParent的位置更改为绝对值。

希望它能帮到你