錯誤的元素在嵌套div時切換

Question

我有一套div（systemHeaders），每個都有一個標頭h2和一個子標記div。每個子女div（子系統）的標題爲h3，子女div有一些鏈接。當我點擊systemHeader時，我只想切換子系統div。當我點擊subSystemHeader時，我只想切換報告div。

實際發生的事情是，無論我點擊，切換子系統div！

我該如何讓它像它應該那樣工作，並且只在每種類型的點擊上切換第一個孩子div？

<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()將尋找所有級別的所有兒童;您可以使用children()代替，或者使用下面的例子：

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

我希望這幫助！