IntroJS Bootstrap菜单不起作用

Question

我正在使用bootstrap进行UI设计。我已将更新的IntroJS配置到我的站点。 现在它可以与其他元素一起使用，但是下拉菜单元素会出现问题。

Answer 1

嘿，man确保先放置你的jquery链接然后写javascript链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 2

检查控制台。很可能没有引用jQuery，在这种情况下你需要在IntroJS之前包含它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 3

派对有点晚了但是对于任何人用谷歌搜索：

下拉菜单UL添加了introjs-fixParent，对我而言，这导致我的菜单显示在页面上的其他元素后面，所以我通过在UL上执行z-index: 1000!important来解决这个问题。 Intro.js在要显示的元素上添加introjs-showElement，它具有非常高的z-index。这里的问题是父母z-index低于面具，所以任何孩子总是在面具后面。

我的解决方法是删除UL上的z-index: 1000!important并将其他元素放在菜单后面。

Answer 4

我有同样的问题，我设法解决它，我在那里发布了一个解释：

use intro.js on bootstrap dropdown element

希望这些帮助。

---

编辑：添加了代码片段和链接

的解释

我找到了一个解决方法，它非常难看，但是完成了工作：

$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属性设置为在我在change事件

中添加的click事件之后阻止

当点击执行元素1的单击时，我注意到jquery将元素2的style.display的状态设置为＆＃39;＆＃39;，所以我等了一下点击才能设置回到＆＃39;阻止＆＃39;，我知道它很难看，但我当时没有找到更好的东西