Древовидное меню проблема с toggle
Господа, окажите пожалуйста помощь в решение следующей проблемы:
ПХП формирует дерево приблизительно следующей структуры: + продукт 1 - продукт 2 - продукт 2.1 + продукт 2.1.1 + продукт 2.1.2 + продукт 2.2 + продукт 2.3 + продукт 3 Все через список: <ul> <li> <a class=opened> - </a>продукт 2 <ul> <li> <a class=opened> - </a>продукт 2.1 <ul> <li> <a class=closed> + </a>продукт 2.1.1 <li> <li> <a class=closed> + </a>продукт 2.1.2 </li> </ul> </li> <li> <a class=opened> - </a>продукт 2.2 </li> <li> <a class=opened> - </a>продукт 2.2 </li> </ul> <li> </ul> Из этого ПХП файла подгружается js скрипт: $(document).ready(function(){ //вешаю обработчик события на клик по ссылке + или - $("a").live("click", function () { var t = this; //раскрываю ветви дерева if($(t).hasClass("closed")){ //здесь через ajax по клику на + подгружаю ветви } //скрваю или раскрываю ветви сформированные пхп или подгруженные через ajax if($(t).hasClass("opened")){ // переключаю видимость $(t).toggle(function(){ $(t).nextAll("ul").hide(); $(t).html(imgClosed); }, function(){ $(t).nextAll("ul").show(); $(t).html(imgOpened); }); } }); }); Но когда страница загружена, если нажать на "-" , например, "продукт 2" то при первом клике список не закроется, а начнет закрываться только при втором !?!?!?!? Никак не могу понять природу такого поведения.......и что можно сделать чтоб исправить этот баг? |
Кто-нить.....хэээээээээлп
Заманался уже совсем, всё прогуглил....не получается никак ( |
Попробуйте воспользоваться консолью файербага.
Посмотрите, что происходит при первом клике, при втором. Очень часто в консоли все видно и становится понятно. Вообще, ваш код не очень оптимизирован. Вот такой вариант тоже можно попробовать: <ul> <li> <a> <img src="plus.png" style="display:none" /><img src="minus.png" /> </a>продукт 2 <ul> <li> <a> - </a>продукт 2.1 <ul> <li> <a> + </a>продукт 2.1.1 <li> <li> <a> + </a>продукт 2.1.2 </li> </ul> </li> <li> <a> - </a>продукт 2.2 </li> <li> <a> - </a>продукт 2.2 </li> </ul> <li> </ul> </li> </ul> $(document).ready(function(){ $('a').live('click',function(){ $(this).addClass('rich'). // при первом клике добавляем метку ссылке чтобы повторно не обращаться к ajax next('ul').slideToggle().end(). find('img').toggle(); // здесь меняем видимость у рисунков плюса и минуса. Вначале должна быть разная. }); $('a:not(.rich)').live('click', function(){/* здесь подгрузка через ajax для нетронутых ранее ссылок*/}) }); |
Спасибо! С помощью вашего примера решил проблему.
P.s. было бы конечно интересно выяснить почему же все таки не срабатывал при первом клике toggle, firebug вообще молчит........ еще раз спасибо за помощь. |
Часовой пояс GMT +3, время: 11:16. |