Създаване на акордеон за сайта, xozblog - уроците и статиите в сайта, блога
- чрез JQuery;
- чрез CSS3;
- използване на HTML5.
Ако не сте срещнали такъв елемент на сайта, а след това ще се случи рано или късно. В действителност, много проста концепция, която изисква малко скрипт, за да функционират. Акордеони, които обикновено се използват за осигуряване на допълнителна информация. Можете да използвате акордеона като:
- падащото меню с подточки;
- отговори на въпросите (FAQ страница).
В действителност, много приложения могат да бъдат намерени. По този начин целта на тази статия, за да разгледа три начина за създаване на акордеон. Да започнем с най-верен начин, това е вярно, в смисъл, че тя ще работи във всички браузъри.
Метод 1: JQuery
Основни HTML маркиране и CSS стилове
Заглавие 1
Ето съдържанието.
функция 2
Ето съдържанието.
Заглавие 3
Ето съдържанието.
Ето съдържанието.
h2 # 123;
цвят. # 002850; размер на шрифта. 30px; шрифт тегло. нормално;
уплътнение. 45px 0 15px; курсора. указател;
# 125;
.акордеон # 123;
граница. 1px твърдо вещество #ddd; гранично-отгоре. няма; марж. 0 10px;
плава. ляв; ширина. 470px; позиция. относителна;
# 125;
.акордеон на # 123;
дисплея. блок; текст-украса. няма;
# 125;
.акордеон h2. акордеон на # 123;
фон-цвят. #fff;
фон-изображение. URL # 40; gradient.jpg # 41; ;
фон-изображение. -moz-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -MS-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -о-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -webkit-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
гранично-отгоре. 1px твърдо вещество #ddd;
цвят. # 222; шрифт. 14px / 30px "Verdana". Безсерифен;
височина. 30px; марж. 0; уплътнение. 0; текст-тире. 10px;
# 125;
р # 123;
цвят. # 555; шрифт. 12px / 18px "Verdana". Безсерифен;
уплътнение. 20px 10px;
# 125;
С тези правила да създават общи за всички методи, основните стилове "бутон" акордеон. Нейната фон CSS3 самата градиент в по-стари браузъри няма да работи, така че има смисъл да хеджира фоново изображение.
Най-важното - JQuery:
$ # 40; документ # 41. готов # 40; функция # 40; # 41; # 123;
$ # 40; '# Акордеон-JS " # 41. намирам # 40; "H2" # 41. кликване # 40; функция # 40; # 41; # 123;
$ # 40; това # 41. до # 40; # 41. спиране # 40; # 41. slideToggle # 40; # 41; ;
# 125; # 41. до # 40; # 41. спиране # 40; # 41. крия # 40; # 41; ;
# 125; # 41; ;
Благодарение на селектора е на номер контейнер акордеон-Js. и h2 елемент в него. Проследяване на кликванията върху този елемент, както и метод .next () изберете следващата точка след h2. в този случай, параграф стр. и отворена или да я скрие, след второто кликване.
Метод 2: CSS3
HTML маркиране
Ето съдържанието.
Ето съдържанието.
h2 # 123;
цвят. # 002850; размер на шрифта. 30px; шрифт тегло. нормално;
уплътнение. 45px 0 15px; курсора. указател;
# 125;
.акордеон # 123;
граница. 1px твърдо вещество #ddd; гранично-отгоре. няма; марж. 0 10px;
плава. ляв; ширина. 470px; позиция. относителна;
# 125;
.акордеон на # 123;
дисплея. блок; текст-украса. няма;
# 125;
.акордеон h2. акордеон на # 123;
фон-цвят. #fff;
фон-изображение. URL # 40; gradient.jpg # 41; ;
фон-изображение. -moz-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -MS-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -о-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. -webkit-линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
фон-изображение. линеен градиент # 40; дъното. # F1f1f1. #fff # 41; ;
гранично-отгоре. 1px твърдо вещество #ddd;
цвят. # 222; шрифт. 14px / 30px "Verdana". Безсерифен;
височина. 30px; марж. 0; уплътнение. 0; текст-тире. 10px;
# 125;
р # 123;
цвят. # 555; шрифт. 12px / 18px "Verdana". Безсерифен;
уплътнение. 20px 10px;
# 125;
С тези правила да създават общи за всички методи, основните стилове "бутон" акордеон. Нейната фон CSS3 самата градиент в по-стари браузъри няма да работи, така че има смисъл да хеджира фоново изображение.
Най-важното - JQuery:
$ # 40; документ # 41. готов # 40; функция # 40; # 41; # 123;
$ # 40; '# Акордеон-JS " # 41. намирам # 40; "H2" # 41. кликване # 40; функция # 40; # 41; # 123;
$ # 40; това # 41. до # 40; # 41. спиране # 40; # 41. slideToggle # 40; # 41; ;
# 125; # 41. до # 40; # 41. спиране # 40; # 41. крия # 40; # 41; ;
# 125; # 41; ;
Благодарение на селектора е на номер контейнер акордеон-Js. и h2 елемент в него. Проследяване на кликванията върху този елемент, както и метод .next () изберете следващата точка след h2. в този случай, параграф стр. и отворена или да я скрие, след второто кликване.