IntroJS Bootstrap Menu doesn't work

后端 未结 4 2196
陌清茗
陌清茗 2021-02-19 09:06

I\'m using bootstrap for UI Design. I have configured updated IntroJS to my site. Now it works fine with other elements but giving problem with Dropdown Menu Elements.

<

相关标签:
4条回答
  • 2021-02-19 09:12

    A bit late to the party but for anyone googling:

    The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.

    My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.

    0 讨论(0)
  • 2021-02-19 09:14

    I've had the same issue and I manage to resolve it, I posted an explanation there:

    use intro.js on bootstrap dropdown element

    Hope these help.


    EDIT: Added snippet of code and explanation from link

    I found a workaround, it's quite ugly, but does the job:

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

    I set the display attribute to block just after the click event I added in the change event

    When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time

    0 讨论(0)
  • 2021-02-19 09:31

    hey man make sure your jquery link placed first then write javascript link

    <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>
    
    0 讨论(0)
  • 2021-02-19 09:32

    Check the Console. Most likely jQuery was not referenced, in which case you need to include it before 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>
    
    0 讨论(0)
提交回复
热议问题