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

2021/01/23 20:11 · jquery ·  · 0评论

我无法弄清楚如何在下拉元素上使用intro.js。

我发现那里没有答案类似的问题:IntroJS引导菜单不起作用

如果您想重现该错误,请按照下列步骤操作:

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函数的末尾添加一个断点,您就会明白我的意思了...

这是一个更清晰的解决方案

 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允许您在事件循环上对函数进行排队,并在处理完所有事件(包括单击关闭下拉列表的单击)之后运行它,此外,最好在以下情况下将类open添加到下拉列表中:您想要将其设置为打开状态

在您的模板中

/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”菜单开始工作。

我找到了一种解决方法,这很丑陋,但是可以做到:

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

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

单击以执行对元素1的单击时,我注意到jquery将元素2的style.display的状态设置为'',因此单击后稍等一下,以便将其设置回“ block”,我知道很难看,但当时我没有发现更好的选择

发生这种情况是因为位置固定。通过使用CSS,可以将父项的位置从固定更改为绝对,并且效果很好。例如:.sidebar的位置是固定的,就这样保留。.sidebar.introjs-fixParent的位置更改为绝对位置。

希望对您有帮助

本文地址:http://jquery.askforanswer.com/zaibootstrapxialayuansushangshiyongintro-js.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!