Mauvais éléments basculés quand divs imbriqués

Question

J'ai un ensemble de div s (systemHeaders) ayant chacun un en-tête h2 et un enfant div. Chaque enfant div (subSystems) a un en-tête h3 et un enfant div avec des liens. Lorsque je clique sur SystemHeader, je veux basculer uniquement les sous-systèmes div. Quand je clique sur subSystemHeader je veux basculer seulement les rapports div.

Qu'est-ce qui se passe réellement est que quoi que je clique sur, bascule les sous-systèmes div!

Comment puis-je faire en sorte qu'il fonctionne comme il se doit et ne faire que basculer le premier enfant div sur chaque type de clic?

<div class="pod"> 
    <li id='ThirdParty'> 
     <div class='block'> 
      <h1>ThirdParty</h1><img class='blockNoBorder' src='images/thirdparty.jpg' width="200"></img> 
      <div class='systemHeader'> 
       <h2><span>Bobs shop</span></h2> 
       <div class='subSystems'>      
        <div class='subSystemHeader'> 
         <h3><span>&nbsp;Gifts</span></h3> 
         <div class='reports '> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=471' title=''>Option 2</a></p> 
         </div> 
        </div> 
        <div class='subSystemHeader'> 
         <h3><span>&nbsp;Directory</span></h3> 
         <div class='reports hidden'> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=466' title=''>Option 3</a></p> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=461' title=''>Option 4</a></p> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class='systemHeader'> 
       <h2><span>Robs shop</span></h2> 
       <div class='subSystems'> 
        <div class='subSystemHeader'> 
         <h3><span>&nbsp;Gifts</span></h3> 
         <div class='reports '> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=480' title=''>Option 5</a></p> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 6</a></p> 
         </div> 
        </div> 
        <div class='subSystemHeader'> 
         <h3><span>&nbsp;Directory</span></h3> 
         <div class='reports hidden'> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=486' title=''>Option 7</a></p> 
          <p class='reports i1'> 
           <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 8</a></p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </li> 
</div> 


      <script> 
       jQuery(document).ready(
       function() 
       { 
        jQuery('div.systemHeader').click(
        function() 
        { 
         jQuery(this).find('div:first').slideToggle(); 
        }); 
       }, 
       function() 
       { 
        jQuery('div.subSystemHeader').click(
        function() 
        { 
         jQuery(this).find('div:first').slideToggle(); 
        }); 
       }); 
      </script> 

Answer 1

find() recherchera tous les enfants de tous les niveaux; vous pouvez utiliser à la place children() ou utiliser l'exemple ci-dessous:

$("div.subSystemHeader, div.subSystemHeader").click(function() { 
    $("> div", this).slideToggle(...); 
    return false; 
}); 

J'espère que cette aide!