JQuery - SlideToggle Несколько DIV одновременно?

Я новичок в JQuery, и у меня есть проблема с обсессивно-компульсивным расстройством.

Я использую SlideToggle с функцией щелчка, чтобы скрыть/показать контейнер div. Однако div внутри него не скользит вместе с ним, он просто появляется.

Есть ли способ заставить оба DIV скользить вместе?

JЗАПРОС:

<script type="text/javascript">
$(document).ready(function(){
$("#store_container").hide();
  $('#toggle').click(function(){
     $('#store_container').slideToggle("slow"); 
     return false;
  });
});
</script>

HTML:

<div id="store_container" style="display:none;">
    <div id="store_data">
        <p>THIS IS A TEST</p>
        </div>
</div>

html toggle jquery slidetoggle
person iamtheratio    schedule 03.02.2010    source источник
comment
Это работает для меня (в webkit). Какой браузер вы используете? Это точный код, который вы используете? Есть ли какой-то css с ним?   -  person user113716    schedule 03.02.2010

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это:

<script type="text/javascript">
$(function(){
  $("#store_container").hide();
  $('#toggle').toggle(function(){
     $('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
   }, function() {
     $('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
  });
});
</script>
  <div id="store_container" style="display:none; height: 300px;">
      <div id="store_data" style="display:none;">
        <p>THIS IS A TEST</p>
       </div>
  </div>
person Nick Craver    schedule 03.02.2010
comment
Это не сработало, и как только #store_container выскользнул, #store_data практически исчез. Очень странно. - person iamtheratio; 03.02.2010
comment
Это на самом деле предотвратило исчезновение #store_data.. ‹script type=text/javascript› $(function(){ $('#store_container, #store_data').hide(); $('#toggle').click(function( ){ $('#store_container, #store_data').slideToggle(slow); return false; }); }); ‹/script› Но это все равно не давало сползти обоим DIVS вместе, только одному.. - person iamtheratio; 03.02.2010
comment
@iamtheratio - обновлено, хотя ваш оригинальный образец работает для меня в FireFox ... попробуйте мой текущий ответ. - person Nick Craver; 03.02.2010
comment
@iamtheratio - Какой браузер вы используете? Я вижу оба слайда с вашим исходным кодом здесь ... нужно увидеть, какой у вас эффект. - person Nick Craver; 03.02.2010
comment
@nick это работает без ошибок, но странно то, что когда я нажимаю #toggle, сразу появляется #store_data, а затем #store_container скользит вниз.. Что ужасно выглядит. - person iamtheratio; 03.02.2010
comment
@iamtheratio - Попробуйте вышеописанное, немного покрасивее, оно будет скользить вниз (кажется, у вас есть указанная высота на вашей странице, так что вы можете использовать это), а затем исчезать во внутреннем содержимом после слайда ... то же самое наоборот в другую сторону. - person Nick Craver; 03.02.2010
comment
Спасибо большое, пытаюсь разобраться в этой хрени, но хочется чтобы все было идеально. хаха. Еще раз спасибо! - person iamtheratio; 03.02.2010