Выпадающий список на wix

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


Посмотреть Пример >

Выпадающий список на 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);

}


 


Видео-инструкция по созданию выпадающего списка на Wix


769 просмотров2 комментария</