top of page
  • Julia Sememova

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


1,354 views
bottom of page