В Песочнице есть пример "Вывод списка объектов карты". Скачал, запустил локально. Всё работает. Подставил свои данные. Опять всё работает. Но захотелось в Bootstrap'е повторить. Делаю так:
<body> <div class="container"> <div class="row"> <div class="dropdown" style="position:relative"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Группы объектов<span class="caret"></span></a> </div> </div> </div> <div id="map"></div> </body>
Далее вместо используемого в примере menu.appendTo($('body')); делаю menu.appendTo($('.dropdown'));
Карта с объектами отрисовывается. Навигация по меню работает. Но по кликам на втором уровне не показываются балуны, как в примере, а при клике на первом уровне одновременно с показом/скрытием второго уровня не показываются/скрываются метки объектов.
Для реализации навигации по меню используются два обработчика:
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle(); // показ/скрытие submenu
// alert('1 !');
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(e){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
// alert('2 !');
event.preventDefault();
event.stopPropagation();
});
Как мне кажется, где-то разорвалась цепочка обработчиков событий для элементов меню и геообъектов, про которую говорится в аннотации к примеру. Используемые для навигации по меню добавленные обработчики не влияют на ситуацию. Без них меню высвечивается сразу развернутым, но клик по любому из пунктов просто закрывает все уровни без изменений на карте.
В какую сторону смотреть ? Где и что нужно подправить ?