jQuery Sliding Div

Question

我在我的頁面上使用jQuery的滑動div，我想有多個實例。

目前，他的jQuery腳本是...

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

$('.show_hide').click(function(){ 
$(".slidingDiv").slideToggle(); 
}); 

}); 

和我的鏈接/ DIV是...

<a href="#" class="show_hide" style="display: inline; ">test<span style="float:right;">+</span></a> 

<div class="slidingDiv" style="display: none; "> 
<div class="information-alert">test</div> 

我怎麼會去有關創建多個實例？由於

Answer 1

我會通過改變

$(".slidingDiv").slideToggle(); 

去

$(this).next().slideToggle(); 

意思 「的slideToggle該點擊的元素之後而來的元素」。

見this JSFiddle

Answer 2

退房JQuery的每個方法http://api.jquery.com/each/

我並不很確定要創建的多個實例什麼？slidingDiv的show_hide鏈接？都？

無論如何，我相信你將需要使用每種方法遍歷你的多個實例。

Answer 3

試圖讓我的腳本工作，這樣當接觸DIV向下，你點擊任何-哪裏，但接觸的div就會滑回了。我知道我正在討論這個錯誤，如果可能的話，我希望提供一些提示，謝謝。

Here is a link我在做什麼。

$(document).ready(function() { 

    $("a.contact-btn").toggle(
       function() { 
       $("#contact").animate({"top": "0"}, 900, "linear"); 
       }, 
       function() { 
       $("#contact").animate({"top": "-450px"}, 900, "linear"); 
        }); 




    $('body').bind('click', function(e) { 

     var position = $('#contact').css('marginTop'); 

     if (position != '-450px') { 
      $("#contact").animate({"top": "-450px"}, 900, "linear"); 
      e.preventDefault(); 
      } 

      else if('#contact') { 
       $("#contact").animate({"top": "0"}, 900, "linear"); 
        } 
      });  
      });