Расширение контента с помощью jQuery (техника аккордеона) ... быстрый вопрос - PullRequest
Новая
       9

Расширение контента с помощью jQuery (техника аккордеона) ... быстрый вопрос

1 голос
/ 29 октября 2010

Это может быть немного глупый вопрос, но я только начал делать красивые вещи в jQuery, и я внезапно задумался, как решить проблему, которую я даже не удосужился рассмотреть без помощи фреймворков.

Предположим, у нас есть два div элемента: 

<body>
    <div id="lorem1" style="display:block; height:400px;">
        Lorem ipsum...
    </div>
    <div id="lorem2" style="display:hidden;">
        dolor sit amet...
    </div>
</body>

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

  1. Итеративно уменьшайте высоту #lorem1, пока она не достигнет 0
  2. Установите #lorem1 в display:none;
  3. Установите #lorem2 на display:block; height:0;
  4. Итеративно увеличивать высоту #lorem2

Тогда проблема ... Увеличьте высоту lorem2 ... до каких пор? Как мы узнаем конечную высоту нашего элемента? Мы явно не можем выбрать статическое значение, например «увеличивать его, пока оно не достигнет 400px», потому что содержимое lorem2 может иметь высоту более 400 пикселей. В противном случае, если оно меньше 400 пикселей, цвета фона / изображения или другие элементы на странице могут выглядеть неправильно.

Так как же нам выяснить, когда остановить наш аккордеон?

Ответы [ 2 ]

0 голосов
/ 29 октября 2010

Я думаю, .slideDown () и .slideUp () сделают это за вас: http://api.jquery.com/slideDown/

0 голосов
/ 29 октября 2010

используя jQuery, вы можете использовать удобный атрибут toggle: 

$('#lorem').animate({
  height: 'toggle'
});

Я уверен, что другие js-библиотеки предлагают аналогичные возможности.

РЕДАКТИРОВАТЬ : Другой подход - анимация объекта до высоты auto. Или не скрывайте его с помощью CSS, получайте размеры объекта с помощью JS и затем скрывайте его с помощью JS. Теперь вы знаете размеры, чтобы показать это снова.

...