javascript - code - dropdown menu jquery
использовать intro.js в выпадающем элементе начальной загрузки (3)
Я не могу понять, как использовать intro.js на выпадающих элементах.
Я нашел похожий вопрос без ответа: IntroJS Bootstrap Menu не работает
Если вы хотите воспроизвести ошибку, выполните следующие действия:
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, и вы поймете, что я имею в виду ...
В вашем шаблоне т.е. в
/views/nav/body-create.html
У вас есть код, где ng-disabled основан на! CurrentPath.name. И значение currentPath.name равно нулю. Попробуйте проверить значение следующего элемента. Вы увидите, что это ноль.
<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>
Убедитесь, что у вас есть правильное имя или вы используете другое условие - я не уверен, что вы пытаетесь сделать с этим условием.
Доказательство: проверьте вышеуказанный элемент в отладчике Chrome по ссылке http://recherche.utilitaire.melard.fr/#/carto . Введите в консоли следующее и нажмите ввод.
$scope.currentPath.name='Hello You';
И ваше меню "Niveau" начинает работать.
Здесь более четкое решение
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 без второго аргумента (миллисекунды) позволяет поставить функцию в очередь в цикле событий и запустить ее после обработки всех событий (включая щелчок, закрывающий раскрывающийся список), также лучше добавить открытый класс в раскрывающийся список, если Вы хотите установить его в открытое состояние
Я нашел обходной путь, это довольно некрасиво, но делает работу:
$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', я знаю это некрасиво, но я не нашел ничего лучшего в то время