jquery .slideToggle подталкивает содержимое вверх

#jquery

Вопрос:

У меня есть несколько разделов, которые я хочу показать / скрыть с помощью .slideToggle. Я ожидаю, что .slideToggle всегда будет выталкивать содержимое вниз, когда оно расширяется, и подтягивать содержимое снизу, когда оно сжимается.

Но, похоже, он перемещает содержимое вверх и / или прокручивает его вниз, когда оно расширяется, вызывая скачкообразную анимацию.

Вот такая скрипка: http://jsfiddle.net/photocurio/X785b /

 $('.milford-directions').click(function() {
  $('#milford').slideToggle();
});
$('.tufts-directions').click(function() {
  $('#tufts').slideToggle();
});
$('.our-affiliations').click(function() {
  $('#affiliations').slideToggle();
});

1. Это потому, что вы нажимаете на именованные ссылки привязки, и поведение по умолчанию для этого заключается в том, чтобы вывести цель в верхнюю часть области просмотра. Вы можете исправить это, используя .preventDefault() : jsfiddle.net/j08691/X785b/6

Ответ №1:

Это происходит потому, что у вас есть идентификатор в качестве привязки href. По умолчанию при нажатии на привязку с идентификатором в качестве href страница будет прокручиваться до этого идентификатора.

Посмотрите, когда я удалю идентификатор: http://jsfiddle.net/X785b/5 /

 <a class="our-affiliations directions">FIRST BOX</a></p>

Вы можете исправить это, используя preventDefault или return false

http://jsfiddle.net/X785b/7/

Ответ №2:

Это выглядит немного лучше

http://jsfiddle.net/X785b/3/

JQUERY

 $('.our-affiliations').click(function() {
    $('#affiliations').slideToggle();
    return false;
});

$('.tufts-directions').click(function() {
    $('#tufts').slideToggle();
    return false;
});
$('.milford-directions').click(function() {
    $('#milford').slideToggle();
    return false;
});

и возвращает false при нажатии кнопки останавливает переход ссылки на идентификатор div, указанный в href.