Bootstarp는 축소 가능한 구성 요소_javascript 팁을 생성합니다.
이 글에서는 Bootstarp를 통해 접을 수 있는 컴포넌트를 생성하는 방법에 대해 알아볼 것입니다.
필요한 것
jquery.js 및 bootstrap-collapse.js를 참조해야 합니다. 두 JavaScript 파일은 모두 docs/assets/js 폴더에 있습니다.
JavaScript를 많이 작성하거나 JavaScript를 호출하지 않고도 축소 가능한 구성 요소를 만들 수 있습니다.
예
첫 번째 예에서는 JavaScript를 호출하지 않고 축소 가능한 구성 요소를 만드는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
설명
여기서 주목해야 할 세 가지 사항이 있습니다. 먼저 구성요소를 확장하거나 축소하기 위해 클릭하려는 링크에 data-toggle="collapse"를 추가하세요.
둘째, 값이 하위 구성 요소의 ID인 상위 구성 요소에 href 또는 data-target 속성을 추가합니다.
셋째, 데이터 부모 속성을 추가하여 아코디언 효과를 만듭니다. data-parent 속성의 값은 기본 컨테이너 div(전체 아코디언 구성 요소를 보유함)의 id 속성 값과 동일합니다. 아코디언만큼 복잡할 필요가 없는 간단한 아코디언 구성 요소를 만들려는 경우에는 이 속성을 추가할 필요가 없습니다.
예시
두 번째 예에서는 간단한 축소 가능한 구성 요소를 만드는 방법을 보여줍니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
JavaScript를 통한 통화
아래 코드를 사용하면 JavaScript를 통해 축소를 실행할 수 있습니다.
$(".collapse").collapse() 옵션, 방법 및 이벤트
Bootstrap Collapsible JavaScript 플러그인을 통해 사용할 수 있는 몇 가지 옵션, 메서드 및 이벤트는 다음과 같습니다. 세부 내용은 다음과 같습니다.
옵션
parent:값 유형은 선택기입니다. 기본값은 false입니다. 상위 요소가 표시되면 상위 요소 아래의 모든 축소 가능한 요소가 닫힙니다.
토글: 값은 부울 유형입니다. 기본값은 true입니다. 호출되면 모든 축소 가능한 요소를 전환합니다.
토글: 값은 부울 유형입니다. 기본값은 true입니다. 호출되면 모든 축소 가능한 요소를 전환합니다.
방법
.collapse(options): 접을 수 있는 콘텐츠를 트리거합니다. 선택적 옵션 개체를 허용합니다.
.collapse('toggle'): 접을 수 있는 페이지 요소를 표시하거나 숨깁니다.
.collapse('show'): 축소 가능한 페이지 요소를 표시합니다.
.collapse(hide): 접을 수 있는 페이지 요소를 숨깁니다.
이벤트
show: 이 이벤트는 show 인스턴스 메소드가 호출된 직후에 트리거됩니다.
표시됨: 이 이벤트는 접을 수 있는 페이지 요소가 표시될 때(그리고 CSS 전환 효과가 실행될 때) 트리거됩니다.
hide: 이 이벤트는 hide 인스턴스 메소드가 호출된 직후에 트리거됩니다.
Hidden: 이 이벤트는 축소 가능한 페이지 요소가 사용자에게 숨겨질 때(그리고 CSS 전환 효과가 완료되었을 때) 트리거됩니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7649
15
1392
52
91
11
73
19
36
110
Windows 10 이전 버전 구성 요소 DirectPlay를 설치하는 방법
Dec 28, 2023 pm 03:43 PM
많은 사용자가 win10에서 일부 게임을 플레이할 때 화면이 멈추거나 화면이 흐려지는 등의 문제에 항상 직면합니다. 이때 다이렉트 플레이 기능을 켜면 문제를 해결할 수 있으며 기능 작동 방법도 매우 간단합니다. 이전 버전의 win10 컴포넌트 다이렉트플레이 설치 방법 1. 검색 상자에 "제어판"을 입력하고 엽니다. 2. 보기 방법으로 큰 아이콘을 선택합니다. 3. "프로그램 및 기능"을 찾습니다. 4. 활성화 또는 활성화하려면 왼쪽을 클릭합니다. Win 기능 끄기 5. 여기에서 이전 버전을 선택하세요. 확인란을 선택하세요.
구글 픽셀 9 프로 폴드 휴대폰 케이스 노출 : 6.4인치 외부 스크린, 8.02인치 내부 스크린
Jun 25, 2024 pm 02:35 PM
25일 뉴스에 따르면, 출처 ytechb는 어제(24일) 블로그 게시물을 게재해 구글 픽셀9 프로 폴드 휴대폰 케이스 렌더링을 공유하며, 이 병풍의 뒷면 디자인을 다시 한 번 보여줬다. 이전 소식에 따르면, 구글은 올해 10월 픽셀 9 시리즈 휴대폰을 출시할 예정이며, 픽셀 9 시리즈 휴대폰 3종 외에 픽셀 폴드도 픽셀 9 시리즈에 포함돼 공식 명칭은 픽셀 9이 될 예정이다. 프로 폴드. 이번에 노출된 휴대폰 케이스는 액세서리 제조사 토로(Torro)의 영국, 미국 온라인 매장에 제품 휴대폰 케이스를 게재하고 휴대폰의 디자인과 디스플레이 사이즈를 공개한 바 있다. 이 페이지에는 다수의 Pixel 9 Pro Fold 휴대전화 케이스 렌더링이 표시됩니다.
삼성 1만위안 폴더블폰 W25 공개 : 500만 화소 전면 언더스크린 카메라, 더 얇아진 본체
Aug 23, 2024 pm 12:43 PM
8월 23일 뉴스에 따르면, 삼성전자는 9월 말 공개될 예정인 새로운 폴더블폰 W25를 출시할 예정이다. 이에 맞춰 언더스크린 전면 카메라와 본체 두께도 개선될 예정이다. 보도에 따르면, 코드명 Q6A인 삼성 W25에는 갤럭시 Z 폴드 시리즈의 400만 화소 카메라보다 향상된 500만 화소 언더 스크린 카메라가 장착될 예정입니다. 또한 W25의 외부 화면 전면 카메라와 초광각 카메라는 각각 1,000만 화소와 1,200만 화소가 될 것으로 예상된다. 디자인적으로 보면 W25는 접힌 상태에서 두께가 약 10mm로 표준형 갤럭시Z폴드6보다 약 2mm 얇아졌다. 화면 측면에서는 W25가 6.5인치 외부 화면과 8인치 내부 화면을 갖고 있는 반면, 갤럭시Z폴드6는 6.3인치 외부 화면과 8인치 내부 화면을 갖고 있다.
Vue를 사용하여 캘린더 구성요소를 구현하는 방법은 무엇입니까?
Jun 25, 2023 pm 01:28 PM
Vue는 매우 인기 있는 프런트 엔드 프레임워크로, 개발자가 효율적이고 유연하며 유지 관리하기 쉬운 웹 애플리케이션을 구축하는 데 도움이 되는 구성 요소화, 데이터 바인딩, 이벤트 처리 등과 같은 많은 도구와 기능을 제공합니다. 이번 글에서는 Vue를 사용하여 캘린더 컴포넌트를 구현하는 방법을 소개하겠습니다. 1. 요구사항 분석 먼저 이 캘린더 구성요소의 요구사항을 분석해야 합니다. 기본 달력에는 다음과 같은 기능이 있어야 합니다. 이번 달의 달력 페이지를 표시하고 특정 날짜를 클릭하여 이전 달 또는 다음 달로 전환할 수 있도록 지원합니다.
삼성 갤럭시 Z 플립 6 모델 최초 공개: 베젤이 더 좁아지고 주름이 여전히 존재함
Jun 22, 2024 am 03:28 AM
21일 뉴스에 따르면 최근 외신들은 삼성 갤럭시Z플립6의 모델 사진을 인터넷에 공개했다. 사진에 따르면 삼성 갤럭시 Z 플립 6의 테두리가 더욱 좁아져 접힌 상태에서 휴대폰의 너비가 줄어들 수 있음을 의미하며, 더욱 편안한 그립감과 휴대성을 제공한다는 것을 알 수 있습니다. . 더욱이 갤럭시 ZFlip6 모델은 이전 세대 ZFlip5에 비해 좀 더 사각형이 되었고, 후면 카메라 모듈도 새로운 카메라 센서를 채용할 것으로 예상됩니다. 다만, 전면에서 보면 여전히 휴대폰의 주름이 비교적 뚜렷하지만, 유출된 모델이 모델폰이라는 점을 고려하면 실제 휴대폰과 다소 차이가 있을 수 있으므로 참고용으로만 사용하시기 바랍니다. 성능 구성으로 보면 갤럭시는
접이식 스크린 휴대폰의 가장 큰 단점: 핵심 응용 시나리오가 없음
Mar 16, 2024 am 09:04 AM
오늘 우리가 논의하는 것은 특정 제품이 어떤 것인지가 아니라, '접이식 화면' 자체의 주제로 돌아가서 접는식 화면 휴대폰의 '합리성'에 대해 탐구하는 것입니다. 먼저, 폴더블폰 시장실적을 살펴보자. IDC 최신 자료에 따르면, 2023년 중국 폴더블폰 시장은 전년 대비 114.5% 증가한 약 700만7000대를 출하할 것으로 예상된다. 그중 중국 폴더블 스크린 휴대폰 시장은 2023년 4분기 약 277만1000대를 출하해 전년 동기 대비 149.6% 증가한 것으로 나타났다. 데이터도 좋아 보이고 성장세도 매우 강하다. 하지만 2023년 중국 시장의 스마트폰 출하량 약 2억 7천만 대에 비하면 이 데이터는 정말 부족하다. 일반적으로
IDC는 2024년 전 세계 스마트폰 출하량이 12억 대에 달할 것으로 추산했다. 폴더블 화면은 2,500만 대로 전년 대비 37% 증가한 수치다.
Feb 24, 2024 pm 02:20 PM
24일 뉴스에 따르면 IDC는 최근 시장조사 보고서를 발표해 2024년 전 세계 스마트폰 출하량이 전년 동기 대비 2.8% 증가한 12억대에 달한 뒤 2028년까지 낮은 한 자릿수 성장률을 유지할 것으로 전망했다. . IDC는 2024년 전체 출하량은 여전히 팬데믹 이전 수준을 밑돌 것으로 보고 있지만 글로벌 스마트폰 시장은 바닥을 치고 회복세를 보이기 시작했다. IDC는 전반적인 시장 회복을 이끄는 두 가지 주요 요인은 장비 갱신 주기와 신흥 시장의 수요 증가라고 믿습니다. IDC는 2024년 폴더블폰 출하량이 전년 대비 37% 증가한 2,500만 대에 이를 것으로 추정하고 있다. 스마트폰 토론이 촉발되다
단어 접기에 대해 알고 싶나요?
Mar 19, 2024 pm 07:49 PM
Word에서 텍스트 내용을 편집한 후에는 편집된 내용을 보고 확인해야 합니다. 내용이 많으면 읽기가 불편한데, 이런 경우에는 단어 접기 방법이 필요한가요? 편집자가 방법 튜토리얼을 모든 친구들과 공유하게 하세요! 먼저 컴퓨터에서 Word 문서를 열고 필요한 내용을 입력하고 선택한 다음 메뉴 표시줄에서 "시작" 옵션을 클릭하고 방금 선택한 텍스트 단락에 적용할 스타일을 선택합니다. 아래 사진에서 빨간색 원으로 표시된 부분을 참고하시면 됩니다. 2. 그러면 선택한 텍스트 단락의 스타일이 변경되고 아래 그림의 빨간색 원에 표시된 대로 작은 화살표가 추가됩니다. 3. 작은 화살표를 클릭하여 이전에 선택한 텍스트 단락을 자유롭게 확장하거나 축소하거나 직접 마우스 오른쪽 버튼을 클릭합니다. , 에서
