SlideToggle多个元素独立

Question

我需要一些帮助与SlideToggle。

HTML：

<ul> 
    <li> 
     <figure class="left"><img src="images/slider/img3.jpg" alt="" width="270" height="152" /><a href="#" class="image-overlay"></a></figure> 
     <div class="meta"> 
      <h2>Superior Double Room</h2> 
      <p>Prices are per room<br />20 % VAT Included in price</p> 
      <p>Non-refundable<br />Full English breakfast $ 24.80 </p> 
      <a href="javascript:void(0)" title="more info" class="more-info">+ more info</a> 
     </div> 
     <div class="room-information"> 
      <div class="row"> 
       <span class="first">Max:</span> 
       <span class="second"><img src="images/ico/person.png" alt="" /><img src="images/ico/person.png" alt="" /></span> 
      </div> 
      <div class="row"> 
       <span class="first">Price:</span> 
       <span class="second">$ 55</span> 
      </div> 
      <div class="row"> 
       <span class="first">Rooms:</span> 
       <span class="second">01</span> 
      </div> 
      <a href="#" class="gradient-button" title="Book">Book</a> 
     </div> 
     <div class="more-information"> 
      <p>Stylish and individually designed room featuring a satellite TV, mini bar and a 24-hour room service menu.</p> 
      <p><strong>Room Facilities:</strong> Safety Deposit Box, Air Conditioning, Desk, Ironing Facilities, Seating Area, Heating, Shower, Bath, Hairdryer, Toilet, Bathroom, Pay-per-view Channels, TV, Telephone</p> 
      <p><strong>Bed Size(s):</strong> 1 Double </p> 
      <p><strong>Room Size:</strong> 16 square metres</p> 
     </div> 
    </li> 

     <li> 
     <figure class="left"><img src="images/slider/img3.jpg" alt="" width="270" height="152" /><a href="#" class="image-overlay"></a></figure> 
     <div class="meta"> 
      <h2>Superior Double Room</h2> 
      <p>Prices are per room<br />20 % VAT Included in price</p> 
      <p>Non-refundable<br />Full English breakfast $ 24.80 </p> 
      <a href="javascript:void(0)" title="more info" class="more-info">+ more info</a> 
     </div> 
     <div class="room-information"> 
      <div class="row"> 
       <span class="first">Max:</span> 
       <span class="second"><img src="images/ico/person.png" alt="" /><img src="images/ico/person.png" alt="" /></span> 
      </div> 
      <div class="row"> 
       <span class="first">Price:</span> 
       <span class="second">$ 55</span> 
      </div> 
      <div class="row"> 
       <span class="first">Rooms:</span> 
       <span class="second">01</span> 
      </div> 
      <a href="#" class="gradient-button" title="Book">Book</a> 
     </div> 
     <div class="more-information"> 
      <p>Stylish and individually designed room featuring a satellite TV, mini bar and a 24-hour room service menu.</p> 
      <p><strong>Room Facilities:</strong> Safety Deposit Box, Air Conditioning, Desk, Ironing Facilities, Seating Area, Heating, Shower, Bath, Hairdryer, Toilet, Bathroom, Pay-per-view Channels, TV, Telephone</p> 
      <p><strong>Bed Size(s):</strong> 1 Double </p> 
      <p><strong>Room Size:</strong> 16 square metres</p> 
     </div> 
    </li> 

</ul> 

的Jquery：

$(document).ready(function() { 
$(".more-information").slideUp(); 
     $(".more-info").click(function() { 
     var txt = $(".more-information").is(':visible') ? '+ more info' : ' - less info'; 
     $(".more-info").text(txt); 
     $(".more-information").slideToggle("slow"); 
    }); 
}); 

通过点击 “更信息” 的链接我需要打开 “详细信息” 股利。现在它全部切换，我怎样才能实现每个独立切换？

谢谢。

Answer 1

在这里你去” Fiddle

的JavaScript：

$(document).ready(function() { 
$(".more-information").slideUp(); 
$(".more-info").click(function() { 
    var moreinformation = $(this).closest("li").find(".more-information"); 
     var txt = moreinformation.is(':visible') ? '+ more info' : ' - less info'; 
     $(this).text(txt); 
     moreinformation.slideToggle("slow"); 
    }); 
});​ 

因为罗克森要求：

moreinformation.stop(true, true).slideToggle("slow"); 

将防止不好的事情点击快速连续多次链接时发生