Здравствуйте.
Сайт готов на 90% и случилась бяда. Появилась необходимость использовать сторонний код для слайдера. Слайдер заработал штатно, но его код конфликтует с кодом выпадающего меню.
Код меню вешает события на тег и должен менять CSS у пары тегов при наступлении событий. Но при работе слайдера CSS у тегов для меню не меняется.
Максимально упростил код страницы, убрал все лишнее.
Код меню на странице
<div class="ui inverted dropdown link item" tabindex="0">
<span class="text">Производители</span><i class="dropdown icon"></i>
<div class="menu transition hidden" tabindex="-1">
<a class="item">AOpen</a>
<a class="item">Telecom</a>
<a class="item">VCOM</a>
<a class="item">TV-COM</a>
</div>
</div>
При наведении курсора должны меняться стили у внешнего и внутреннего тегов
div
<div class="ui inverted dropdown link item active visible" tabindex="0">
<span class="text">Производители</span><i class="dropdown icon"></i>
<div class="menu transition visible" tabindex="-1" style="display: block !important;">
<a class="item">AOpen</a>
<a class="item">Telecom</a>
<a class="item">VCOM</a>
<a class="item">TV-COM</a>
</div>
</div>
Функции меню в файле
dropdown.js.
Браузер показывает что события висят на теге когда слайдера нет и когда он есть - в обоих случаях.
Инициализация выпадающего меню и слайдера происходит в скрипте в заголовке странице.
Выпадающее меню:
jQuery(function($){
// Инициализация выпадающих меню
jQuery('.ui.dropdown').dropdown({on: 'hover', transition: 'drop'});
...
Слайдер:
jQuery(function($){
...
// запуск слайдера
if ($('#rev_slider_2_1').revolution == undefined)
{revslider_showDoubleJqueryError('#rev_slider_2_1');}
else
{revapi2 = $('#rev_slider_2_1').show().revolution({});}
Перед инициализацией идет код для слайдера.
Файлы скриптов используемые слайдером:
jquery.themepunch.tools.min.js и
jquery.themepunch.revolution.min.js
Выпадающим меню:
dropdown.js и
transition.js
Страница с работающим слайдером (меню не работает):
2.html
Страница с работающим меню (тупо закомментировал инициализацию слайдера):
1.html
В инструментах
Google Chrome использовал брэкпоинт на событии
mouseover. Наводил на слайдер и на выпадающее меню. Оба раза запускалась функция из библиотеки слайдера, а именно из
jquery.themepunch.tools.min.js (!!???)
Что может не пускать функцию выпадающего меню отрабатывать событие? Не могу сообразить - что мне искать, не понимаю логики происходящего.