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

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