cssing Архив » Простой аккордеон

Простой аккордеон

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

Проблема

На сайте понадобился такой элемент. Выглядят они обычно как-то так. Я буду считать что один из его блоков должен быть всегда открыт, но на деле, это не очень важно.
Ну и предполагаем, что по невероятному совпадению на сайте уже есть jquery. Потому что подключать его только ради меню глупо, согласитесь. Но, если очень хочется, то, как всегда, можно.
HTML — обычный dl, в котором dt будут кликаться, а dd раскрываться, вот такой:

1. <dl>
2. <dt class="b-acc">Заголовок</dt>
3. <dd>
4. Контент
5. </dd>
6. …

И все видимые блоки имеют фиксированную высоту 150px.

#1: Своими силами

Сделать такой эффект своими силами вроде бы совсем несложно. Всего-то нужно схлопывать-расхлопывать два блока одновременно.

1. $(“.b-acc”).click(function(){
2. if($(this).hasClass(‘b-acc-active’)) {
3. // сделать что-то если блок уже открыт
4. }
5. else{
6. $(“dd:visible”).slideUp();// закрыть «видимый» блок
7. $(this).next().slideDown();// открыть новый блок
8. // и переключить класс b-acc-active
9. …
10. }
11. return;
12. });

Можно посмотреть в работе. На первый взгляд все отлично.
Однако, если присмотреться, во время анимаций нижняя граница аккордеона скачет. В некоторых проектах на это и можно закрыть глаза, но когда под аккордеоном куча контента, который будет прыгать на 1-2 пикселя, это очень неприятно.
Пришлось искать решение.

#2: Плагин

Это будет первое что вы нагуглите. Проще всего его подключить и вызвать. И если всем плевать на размер файла, а также на то, что вы подключили кучу мусора (разве что ваш сайт будет увешан всеми видами аккордеонов). На этом можно и закончить уже разработку.

Я сделал простой пример работы плагина. Нижняя кромка больше не прыгает.
Однако добавилось 8 Кбайтов плагина.

#3: Улучшенный вариант

Но так хотелось все оставить простым, так не хотелось подключать кучу лишнего кода, который, я знал, никому на сайте уже не понадобится. И я решил раскопать проблему, почему же нижняя граница дергается, и как это все исправить.
В конце концов оказалось, что функции slideUp и slideDown меняют высоту блоков не по целым значениям. То есть, в процессе анимации высоте блока присваиваются значения вроде 2.157305232px. При этом, округление в браузерах работает очень по-разному, что и приводило к «вибрации» нижней кромки аккордеона.

Наконец забравшись в недра плагина, я нашел решение, которое также познакомило меня с малоизвестными возможностями jquery.
Идея примерно такая: мы начинаем «схлопывать» видимый блок, при этом, на каждом шаге анимации, рассчитывать высоту расхлопываемого блока так, чтобы сумма их оставалась константой. То есть, если на каком-то шаге высота закрываемого 50 пикселей, то высота открываемого будет 100 (в сумме 150px).

Для этого в jquery есть специальный механизм. В функции animate, есть возможность исполнять что-то на каждом шаге анимации. Называется этот коллбэк — step.
Финальное работающее решение выглядит примерно так:

1. toShow = $(this).next();
2. toHide = $(“.accordion dd:visible”);
3.  
4. staticheight = toHide.height(); //определить высоту блоков, 150px
5. toShow.css({ height: 0,display: ‘block’ }); // открываемый делаем “видимым” с высотой 0, теперь он готов к анимации
6. toHide.animate({height:”hide”},{ // начинаем скрывать видимый
7. step: function(now) { // на каждом шаге выполняем, now – значение height в каждый момент
8. var current = staticheight – now; // собственно рассчет
9. if ($.browser.msie || $.browser.opera || $.browser.safari) { // все округляют по-своему
10. current = Math.ceil(current);
11. }
12. toShow.height(current); // присваиваем высоту
13. },
14. duration: 500
15. });

Работающий пример. Вуаля, нижняя граница опять зафиксирована, и мы сэкономили 7 Кбайт несжатого кода.

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

В конце

Все это далеко не rocket science, но мои долгие попытки найти легкое решение этой проблемы приводили только к плагину. Который я, ну никак не хотел подключать. Потому надеюсь кому-то это сэкономит усилия и код. И буду рад услышать ваше мнение об этом.

Разумеется, только ради аккордеона не стоит подключать jquery, но, обычно, сайты с такими навороченными меню содержат еще кучу всяких анимаций и действий. И потому, в результате, все равно удобнее использовать фреймворк для разработки.

Ссылки

• Плагин для jquery
• Ссылку на документацию step, найти не удалось, был бы благодарен, если кто-то сталкивался
• Пример с плагином
• Пример своими силами
• Пример своими силами, с зафиксированной нижней кромкой

XHTML/CSS, Полезности