재단은 목록을 축소
당신은 화면의 일부를 숨길 때 목록을 축소 할 수 있습니다.
예
<UL 클래스 = "아코디언"데이터 -accordion>
<리 클래스 = "아코디언 탐색 ">
href가 = "#demo"> 간단한 축소 </ A>
<사업부 아이디 = "데모"클래스 = "콘텐츠">
이 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
</ UL>
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
<리 클래스 = "아코디언 탐색 ">
href가 = "#demo"> 간단한 축소 </ A>
<사업부 아이디 = "데모"클래스 = "콘텐츠">
이 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
</ UL>
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
»시도
분석의 예
.accordion 클래스와 data-accordion 속성은 접을 수있는 요소를 만드는 데 사용됩니다. .accordion-navigation 클래스는 접을 수있는 요소를 렌더링하는 데 사용됩니다. 실제 콘텐츠 .content 클래스 (<DIV 클래스 = "콘텐츠" ) 및 중 하나를 표시하는 버튼을 클릭합니다.
우리는 목록 항목에 추가 <a> 요소를 제어하기 (표시 / 숨기기)를 축소. 그런 다음 동일한 콘텐츠 ID와 접을 수있는 내용 (<a href=#demo" 与<div id="demo"> 연관된)로 링크를 고정.
참고 : 접는 효과가 재단 JS를 초기화 할 필요가있다.
기본적으로 접을 수있는 내용이 숨겨져 있습니다. 우리가 할 수있는 <div> 이전 .active 클래스가 표시를 기본값으로 허용된다 :
아코디언 효과
확장 및 설정 접을 수있는 콘텐츠에 대한 아코디언 효과.
링크를 생성하기 위해 서로 다른 앵커와 ID를 복수 사용하여 아코디언 효과 :
예
<UL 클래스 = "아코디언"데이터 -accordion>
<리 클래스 = "아코디언 탐색 ">
href가 = "#demo"> 아코디언 예 1 </ A>
<사업부 아이디 = "데모"클래스 = "콘텐츠 활성화">
데모 1 - 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
<리 클래스 = "아코디언 탐색 ">
href가 = "# demo2"> 아코디언 인스턴스 2 </ A>
<사업부 아이디 = "demo2"클래스 = "콘텐츠">
데모 2 - 로렘 입숨 슬픔은 AMET 앉아 ....
</ DIV>
</ 리>
<리 클래스 = "아코디언 탐색 ">
href가 = "# demo3"> 아코디언 인스턴스 3 </ A>
<사업부 아이디 = "demo3"클래스 = "콘텐츠">
데모 3 - 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
</ UL>
<리 클래스 = "아코디언 탐색 ">
href가 = "#demo"> 아코디언 예 1 </ A>
<사업부 아이디 = "데모"클래스 = "콘텐츠 활성화">
데모 1 - 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
<리 클래스 = "아코디언 탐색 ">
href가 = "# demo2"> 아코디언 인스턴스 2 </ A>
<사업부 아이디 = "demo2"클래스 = "콘텐츠">
데모 2 - 로렘 입숨 슬픔은 AMET 앉아 ....
</ DIV>
</ 리>
<리 클래스 = "아코디언 탐색 ">
href가 = "# demo3"> 아코디언 인스턴스 3 </ A>
<사업부 아이디 = "demo3"클래스 = "콘텐츠">
데모 3 - 튜토리얼 - 과학뿐만 아니라 기술뿐만 아니라 꿈입니다! ! !
</ DIV>
</ 리>
</ UL>
»시도
기본적으로 아코디언은 목록 항목이 열려있다. 당신은 모두가 사용할 수 있습니다 닫아야 할 경우 data-options="multi_expand:true;" ;" 속성 :