JQuery отключает ссылки

Question

В принципе у меня есть этот HTML-таблицы (который действует как меню):

<table class="content" align="center"> 
    <tr> 
     <td class="links"> 
      <table class="links"> 
       <tr> 
        <td> 
         <div id="i1"> 
          <a href="http://www.google.com">Sth 1</a> 
         </div> 
         <div id="i1"> 
          <a>Sth 2</a> 
          <div id="i2"> 
           <a href="http://www.google.com">Sth 2 2</a> 
          </div> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

и этот скрипт JQuery, чтобы сделать его открытия/закрытия:

$(document).ready(function(){ 
$("table.links").find("div").toggle(
    function(e){ 
     $(e.target).closest("div").children("div").slideDown(200); 
    }, 
    function(e){ 
     $(this).children("div").slideUp(200); 
    } 
);}); 

Для некоторых неизвестно это JQuery код отключает ссылки - вы все равно можете открыть их, если вы щелкните правой кнопкой мыши по ссылке и выберите «Открыть» в новом окне, но они не будут открываться, если вы оставите клик.

Может ли кто-нибудь сказать мне, почему это так и как его исправить.

Скачать все файлы (HTML код, стили CSS, JQuery код и JQuery в комплекте): http://www.2shared.com/file/veMG6Gjo/test.html

Answer 1

Это известный побочный эффект toggle(). В документации сказано:

Реализация также вызывает .preventDefault() событие, поэтому ссылки не будет сопровождаться и кнопки не будет нажата, если .toggle() имеет был вызван на элемент.

Чтобы обойти это, вам необходимо привязать к click вместо toggle.

- источник ->jQuery: link doesn't work after .toggle()

---

Так что вы могли бы сделать что-то вроде:

$(document).ready(function(){ 
    $("table.links").find("div").each(function(){ 
     var toggler = false; 
     $(this).click(function(e){ 
      toggler = !toggler; 
      if(toggler){ 
       $(e.target).closest("div").children("div").slideDown(200); 
      }else{ 
        $(this).children("div").slideUp(200); 
      } 
     }); 
    }); 
}); 

Answer 2

Используйте следующий код, это позволит только пуговицу, если есть дети, для DIV:

$(document).ready(function(){ 
    $("table.links").find(".i2").parent().toggle(
     function(e){ 
      $(e.target).closest("div").children("div").slideDown(200); 
     }, 
     function(e){ 
      $(this).children("div").slideUp(200); 
     } 
    ); 
}); 

Также обратите внимание, что я использовал .i2, а не #i2, потому что вы должны использовать классы, а не идентификаторы.