Древовидное меню проблема с toggle

[javascript]

Господа, окажите пожалуйста помощь в решение следующей проблемы:
ПХП формирует дерево приблизительно следующей структуры:

+ продукт 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" то при первом клике список не закроется, а начнет закрываться только при втором !?!?!?!?

Никак не могу понять природу такого поведения.......и что можно сделать чтоб исправить этот баг?

[javascript]

Кто-нить.....хэээээээээлп
Заманался уже совсем, всё прогуглил....не получается никак (

[Urfin]

Попробуйте воспользоваться консолью файербага.
Посмотрите, что происходит при первом клике, при втором.
Очень часто в консоли все видно и становится понятно.
Вообще, ваш код не очень оптимизирован.
Вот такой вариант тоже можно попробовать:

<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 для нетронутых ранее ссылок*/})
	});

[javascript]

Спасибо! С помощью вашего примера решил проблему.
P.s. было бы конечно интересно выяснить почему же все таки не срабатывал при первом клике toggle, firebug вообще молчит........ еще раз спасибо за помощь.