このjQueryのslideToggle関数で何が問題になっていますか？

Question

jQueryを使用するために 'accordian'スタイルの機能を追加しようとしているチケット管理プログラムがあります。このプログラムはPHPで書かれています。出力されるHTMLは次のようになります。

<div class="eachticketwrapper"> 
    <div class="simpleticketview"> 
      <ul class="displayinline ticketsummarybar"> 
        <li class="col0"><a href="#" class="toggleLink">E</a></li> 
         //... 
      </ul> 
     </div> <!-- simpleticketview --> 
<br class="clear" /> 
<div class="toggle"> <!-- hiddenticketview --> 
    //... 
</div> 

これはページ上で何十時間も繰り返されます。

私のjQueryのコードは次のようになります。私はEをクリックすると、それは次のdivをスライドさせないであろう

$(document).ready(function() { 
    $('div.toggle').hide(); 
    $('.toggleLink').click(function() { 
     $(this).next('div.toggle').slideToggle('fast'); 
    return false; 
    }); 
}); 

。実際には何も起こりません。

私はこれを試してみました： $（ 'div.toggle'）。slideToggle（ 'slow'）;

これにより、すべてのdivがトグルします。しかし、NEXT divをターゲットにする必要があります。

ありがとうございます。

Answer 1

あなたは 'toggle' divに一意のIDを与え、あなたのリンクIDと一致させる必要があります。そして、これらのIDをターゲット：

<div class="eachticketwrapper">  
    <div class="simpleticketview">   
     <ul class="displayinline ticketsummarybar"> 
       <li class="col0"><a href="#" id="link-1234" class="toggleLink">E</a></li> 
        //...   </ul> 
    </div> <!-- simpleticketview --> 
    <br class="clear" /> 
    <div id="ticket-1234" class="toggle"> <!-- hiddenticketview -->  
    //... 
    </div> 

のjQuery：

$(document).ready(function() { 
    $('div.toggle').hide(); 
    $('.toggleLink').click(function() { 
     var id = $(this).attr("id").split("-"); 
     $("#ticket-" + id[1]).slideToggle('fast'); return false; 
    }); 
}); 

Answer 2

あなたはIDなしのdivを得ることができますが、それは何らかの形で複雑になります。

$(this).parents().find("div.eachticketwrapper").nextAll().find("div.toggle:first") 

これは、の構造に依存しますあなたの文書複数のeachticketwrapper要素がある場合は、それを適合させる必要があります。 idを使う方が良いです。