在引导下拉单元上使用intro.js [英] use intro.js on bootstrap dropdown element

问题描述

我不知道如何在下拉单元上使用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函数的末尾添加一个断点，你将明白我的意思...

解决方案

这里有一个更清晰的解决方案

  function startIntro（）{
 var intro = introJs（）; 
 intro.setOptions（{
 steps：[
 {
元素：#mydropdown，
介绍：这是一个下拉菜单
} 
 {
元素：'#mydropdownoption'，
 intro：这是下拉列表中的一个选项，
 position：'bottom'
}，
 
] 
}）; 
 
 intro.onbeforechange（function（element）{
 if（this._currentStep === 1）{
 setTimeout（function（）{
 $（＃ mderopdown）addClass（open）; 
}）; 
} 
}）; 
 intro.start（）; 
}; 
 
 $（document）.ready（function（）{
 setTimeout（startIntro，1500）; 
}）;注意，没有第二个参数（毫秒）的setTimeout可以让您在事件循环中排队功能并运行在所有事件处理完毕（包括点击关闭下拉列表）后，如果要将其设置为打开状态，最好将类打开到下拉列表
 
I cannot figure out how to use intro.js on dropdown elements.

I found a similar question with no answer there: IntroJS Bootstrap Menu doesnt work

If you want to reproduce the error, follow these steps:

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

You have to click on "Aide" (The green button on the top right), the problem occurs for the second step. on the change event, I do:
$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
    } 
    console.log("Change Event called"); 
};
When debugging, everything is working like a charm until that function end: _showElement
After that, I get lost in JQuery events, and the dropdown is closed...

If you want to reproduce, just add a breakpoint at the end of the _showElement function and you will understand what I mean...
解决方案
Here a clearer solution
 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);
  });
Note the setTimeout with no second argument (milliseconds) allows you to queue the function on event loop and run it after all events were processed (including the click closing the dropdown), also, it is better to add the class open to the dropdown if you want to set it to open state

                        
这篇关于在引导下拉单元上使用intro.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！