Попытка динамически расширить различные div с помощью одной функции - PullRequest
1 голос
/ 09 июня 2010

Я пытаюсь иметь возможность динамически разворачивать / сворачивать несколько делений с помощью одного и того же кода ....

это контролируется нажатием пролета (переключения), а затем я пытаюсь получитьследующий идентификатор (div, который будет скользить вверх и вниз)

            $('span').toggle(
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('-');},
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('+');}

    );

Этот код работает для расширения 1 div ... но предположим, что у меня есть div

#downloadholder<br/>#linksholder<br/>etc...
Как я могу добиться того же эффекта с помощьютот же код?Спасибо!

РЕДАКТИРОВАТЬ

Стоит отметить, что мне нужно, чтобы каждый div переключался независимо.Если я нажму кнопку «плюс» на диапазоне, который влияет на #albumholder, он не должен раскрывать #downloadholder или # linksholder

Ответы [ 2 ]

5 голосов
/ 09 июня 2010

Два пути -

добавить их в селектор

$('#downloadholder, #linksholder') 

или добавить класс к этим предметам

$('.toExpand')

<div id="downloadholder" class="toExpand" />
<div id="linksholder" class="toExpand" />

Перечитывая ваш вопрос, возможно, вы хотите получить следующий div?

$('#yourSpanElement').click(function() {
    $span = $(this);
    $yourDiv = $span.next('div');
   // do your magic :)
});

Ваш код обновлен:

$('span').toggle(
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('-');
    },      
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('+');
    }
 );

Вы также можете проверить наличие следующих divs:

$('span').click(function() {
  var $span = $(this);
  var $nextDiv = $span.next('div');
  if( $nextDiv.is(':visible') ) {
     $nextDiv.slideUp(600);
     $span.html('+');
  }else {
     $nextDiv.slideDown(600);
     $span.html('-');
  }
});
0 голосов
/ 09 июня 2010

Сделайте htmlr примерно таким.

<span toggletarget="downloadholder>+</span>
<div id="downloadholder"></div>

Тогда сделайте свой JavaScript

$('span[toggletarget]').click(function () {$(this).toggle(
function() {
    $("#"+$(this).attr("toggletarget")).slideToggle(600);
    $(this).html('-');},
function() {
$('#albumholder').slideToggle(600);
$(this).html('+');}
);});
...