Изменение размера других элементов в аккордеонном событии jQuery
Я использую div и таблицу (внутри контейнера div) ниже div на html-странице.
1-й див — это аккордеон
$( function() {
$( "#resizeableDiv" ).accordion({
collapsible: true,
active:false'
});
} );
После щелчка по заголовку div сворачивается или разворачивается. Таблица, которая находится ниже, застревает ниже свернутого / развернутого div.
То, что я хотел бы сделать, это то, что я хотел бы, чтобы высота div контейнера таблицы увеличивалась, когда разрушается 1-й div, и уменьшалась при расширении, поэтому размер обоих элементов остается одинаковым.
Я провел некоторое исследование на форумах, попытался сделать это сам, поместив инструкции по высоте в гармошку ({}) или функцию ({}), но пока я новичок в jQuery, он вообще не работает.
Я застрял с этим некоторое время, поэтому любая помощь будет приветствоваться! 🙂
Решение
Вы можете привязать к Активировать событие
Например, вот как вы можете использовать событие активации для прокрутки вверх:
$("#accordion").accordion({
active: false,
collapsible: true,
heightStyle: "content",
activate: function (event, ui) {
if (ui.newHeader.length > 0) {
var offset = ui.newHeader[0].offsetTop - 20;
var bodyOffset = $(document).scrollTop();
if (bodyOffset > offset) {
$('body,html').animate({
scrollTop: offset
});
}
}
}
Другие решения
Для тех, кто заинтересован, вот решение, которое я реализовал. Ответ hcham1 также эффективен.
$( function() {
$( "#myDiv" ).accordion({
collapsible: true,
active:false,
activate: function(event, ui) {
if(ui.newHeader.text()!="") //Expanding (will be empty when the tab is collapsed
$("#ScrollBody").animate({
height: '-=420px'
}, 1000);
else //Collapsing
$("#ScrollBody").animate({
height: '+=420px'
}, 1000);
}
});
});