Подтвердить что ты не робот

Меню IntroJS Bootstrap не работает

Я использую bootstrap для UI Design. Я настроил обновленный IntroJS на свой сайт. Теперь он отлично работает с другими элементами, но создает проблемы с элементами меню раскрывающегося меню.

problem in IntroJS with Bootstrap

4b9b3361

Ответ 1

Эй, убедитесь, что ваша 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>

Ответ 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>

Ответ 3

Немного поздно для вечеринки, но для всех, кто ищет:

В раскрывающемся меню UL добавлен introjs-fixParent, для меня это заставило мое меню появляться за другими элементами на странице, поэтому я исправил это, выполнив z-index: 1000!important на UL. Intro.js добавляет introjs-showElement к отображаемому элементу, который имеет действительно высокий z-индекс. Проблема здесь в том, что z-индекс родителей ниже маски, поэтому любые дети всегда находятся за маской.

Мое исправление заключалось в том, чтобы удалить z-index: 1000!important в UL и поместить остальные элементы в мое меню.

Ответ 4

У меня была такая же проблема, и мне удалось ее решить, я разместил там объяснение:

используйте intro.js в раскрывающемся элементе bootstrap

Надеюсь на эту помощь.


EDIT: добавлен фрагмент кода и объяснение из ссылки

Я нашел обходное решение, это довольно уродливо, но делает работу:

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

Я установил атрибут отображения для блокировки сразу после события клика, которое я добавил в событии изменения

При нажатии на щелчок элемента 1 я заметил, что jquery задал состояние style.display элемента 2 в '', поэтому я немного подождал, щелкнув, чтобы вернуть его в 'block', Я знаю это уродливо, но в то время я не нашел ничего лучшего