顯示上點擊特定的div這個HTML層次

Question

這是我的.html代碼

<div class="col-2"> 
     <div class="col-content"> 
     <div class="lt"> 
      <div class="lt-img arch"></div> 
      </div> 
      <div class="rt">     
       <h3>Competitve Prices</h3> 
       <p>Arch Linux 2012.12 x64</p> 
       <a href="">Read more <div class="arrow"></div></a>     
      </div> 
        <div class="clearfix"></div> 
      <div class="wholebox"> 
        <ul> 
         <li>Arch Linux 2012.12 x64</li> 
         <li>Arch Linux 2012.08 x64</li> 
         <li>Arch Linux 2012.08 x86</li> 
        </ul> 
      </div> 
     </div> 
    </div> 

我這裏有.js文件代碼..

$(".rt a").click(function() { 
    $(".wholebox").slideToggle("slow"); 
    return false; 
    }); 

問題：當我點擊在鏈接它顯示所有div類wholebox。在.css文件我設置屬性爲display:none爲這wholebox class.How我可以顯示wholebox只爲特定鏈接與此層次結構HTML的代碼。

Answer 1

$('.rt a').click(function() { 
    $(this).closest('.col-content').find('.wholebox').slideToggle('slow'); 
    return false; 
}); 

Answer 2

嘗試某事像以下：

$(".rt a").click(function() { 
    //first look for <div class="col-content"> and find class .wholebox 
    $(this).parent().parent().find(".wholebox").slideToggle("slow"); 
    return false; 
    }); 

Answer 3

給出一些數據-ID您標籤和ID映射到你的 「wholebox」 類。

請參考下面的代碼。 只需要從<a href="" data-id="1">收集ID和映射它<div class="wholebox**1**">

<div class="col-2"> <div class="col-content"> <div class="lt"> <div class="lt-img arch"></div> </div> <div class="rt">
<h3>Competitve Prices</h3> <p>Arch Linux 2012.12 x64</p> <a href="" data-id="1">Read more <div class="arrow"></div></a>
</div> <div class="clearfix"></div> <div class="wholebox1"> <ul> <li>Arch Linux 2012.12 x64</li> <li>Arch Linux 2012.08 x64</li> <li>Arch Linux 2012.08 x86</li> </ul> </div> </div> </div>

$(".rt a").click(function() { 
    $(".wholebox"+($(this).attr("data-id"))).slideToggle("slow"); 
    return false; 
    });