2011-06-15 3 views
0

У меня есть скользящий div на моей странице, который использует jQuery, я бы хотел иметь несколько экземпляров.jQuery Sliding Div

На данный момент он JQuery скрипт ...

$(document).ready(function(){ 

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

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

}); 

и моя связь/дел является ...

<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> 

Как бы идти о создании нескольких экземпляров? Благодаря

ответ

2

Я бы, изменив

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

в

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

означает "slideToggle элемент, который идет сразу после щелкнули элемента".

См this JSFiddle

+0

Только то, что я сделал, спасибо @mkilmanas – Liam

0

Заканчивать в JQuery каждый метод http://api.jquery.com/each/

Я не совсем уверен, что вы хотите создать несколько экземпляров из: slidingDiv, ссылка show_hide? и то и другое?

В любом случае, я уверен, что вам нужно будет использовать каждый метод для повторения нескольких экземпляров.

1

Попытка получить мой сценарий, чтобы работать таким образом, что, когда контакт ДИВ вниз и нажать кнопку любого-где, но контакт 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"); 
        } 
      });  
      });