如何找到被点击的父母的特定孩子？

Question

我正在访问链接列表项下的子链接。 [3级层次结构]

每个链接都可以显示带有小箭头的子链接，其中包含子链接。

单击它时，我需要显示带有子链接列表的div。 现在的问题是，当我点击时，任何带有子链接的链接（列表项）都会打开。

以下是从xslt生成的示例代码，页面包含n个列表项，如下所示

      <li>
        <div>
          <table>
            <tbody><tr style="background-color:#F6FBFF;vertical-align:middle">
              <td style="text-align: center;background-color:#F6FBFF;width:13px;height:22px">
                <div class="childLevelCollapse" data-state="closed">
                </div>
              </td>
              <td>
                <a href="s.aspx">Ex-offenders</a>
              </td>
            </tr>
          </tbody></table>
        </div>
        <div style="display: block;" class="childUI">
          <ul style=" background-color:#DEECF7;">
            <li style="margin-left:1em">
              <a href="s.aspx">TEST</a>
            </li>
          </ul>
        </div>
      </li>

要切换的代码

<script type="text/javascript">

$(document).ready(function() {

    $('.display').click(function () {
        if($(this).attr("data-state") == "open")
        {      
            $(this).attr("class", "childLevelCollapse");
            $(this).attr("data-state", "closed");   
            $(".childUI").hide(); //this works but hides all sub links      
        }
        else
        {
            $(this).attr("class", "childLevelExpand");
            $(this).attr("data-state", "open");
            $(".childUI").show();//this works but opens all sub links
            $(this).closest('.div1').children('.childUI').slideToggle('slow');//tried 
            $(this).parent().siblings(".childUI");//tried 
            $(this).parents(".div1").children(".childUI");//tried 
            $(this).closest(".div1").find('[class*="childUI"]').first().show();//tried 
            // working but always opens the first list item with sublinks , i know it says .first(). i want to open the list item which is currently clicked
            $(this).closest(".div1").find('[class*="childUI"]').first().slideToggle('slow');
        }
    });
});
</script>

CSS

 <style>
.childUI
{
    display:none;

}
.childLevelCollapse
{
    height:14px;
    width:12px;
    background:url('/images/Navarrow1.gif') no-repeat 0px 5px;display:inline-block;
}
.childLevelExpand
{
    height:14px;
    width:12px;
    background:url('/images/Navarrow2.gif') no-repeat 0px 5px;display:inline-block;
}
</style>

如下所示

更新

我删除了所有表结构，下面的行工作

  $(this).parent('.div2').children('.childUI').slideToggle('slow');