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

자바 스크립트 이동 :

$(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"); 
    }); 
});​ 

ROXON 요청한 이유는 다음과 같습니다.

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

빠르게 연속 링크를 여러 번 클릭 할 때 일어나는 나쁜 일을 방지 할 수