Сегодня мы с вами разберем, как сделать выпадающий список на Wix с помощью кода. Функция актуальна для сайтов с большим количеством информации. Страница со сворачивающимися подпунктами всегда выглядит более гармонично.
Описание примера выпадающего списка
В этом примере показано, как интегрировать сворачиваемый список на ваш сайт. Элементы на странице открывают разделы меню, когда пользователь нажимает на одну из стрелок. Элементы каждого пункта меню помещены в бокс.
Обратите внимание, что открытие или закрытие блока влияет на все элементы внутри бокса, поэтому нам не нужно разворачивать или сворачивать каждый по отдельности.
Код для выпадающего списка
Скопируйте код, для создание собственного списка
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
} else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1, 2, 3, 4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
Comments