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;
  });

问题：当我点击链接时，它显示所有包含类wholebox的div。在.css文件中，我将display:none的属性设置为{{1}如果wholebox仅显示wholebox代码层次结构的特定链接。

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;
  });

在点击此html层次结构的链接时显示特定div

3 个答案: