부트 스트랩 드롭 다운 상자를 바인딩하는 방법

부트 스트랩 드롭 다운 상자를 바인딩하려면 JavaScript를 사용해야합니다. 드롭 다운 클래스를 사용하여 드롭 다운 요소를 인스턴스화하십시오. show.bs.dropdown 및 hidden.bs.dropdown과 같은 이벤트 처리기를 바인딩합니다. 드롭 다운 클래스 (예 : show () 및 hide ())의 메소드를 호출하여 드롭 다운 박스의 동작을 제어합니다.

드롭 다운 상자를 바인딩하기 위해 JavaScript를 사용하는 부트 스트랩

Bootstrap은 드롭 다운 박스를 포함하여 간단하고 사용하기 쉬운 구성 요소를 제공합니다. JavaScript를 사용하여 드롭 다운 상자를 바인딩하려면 다음 단계를 사용하십시오.

1. 부트 스트랩 자바 스크립트 소개

HTML 페이지에서 부트 스트랩 자바 스크립트 라이브러리를 소개하십시오.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 드롭 다운 상자를 인스턴스화하십시오

바인딩하려는 드롭 다운 요소를 찾고 Bootstrap의 드롭 다운 클래스를 사용하여 인스턴스화하십시오.

 <code class="javascript">const dropdown = new bootstrap.Dropdown(document.getElementById('dropdown-element'));</code>

3. 이벤트 핸들러 바인드

필요에 따라 다양한 이벤트 처리기를 드롭 다운 상자에 바인딩 할 수 있습니다. 몇 가지 예는 다음과 같습니다.

• show.bs.dropdown : 드롭 다운 상자가 표시되기 전에 트리거되었습니다
• show.bs.dropdown : 드롭 다운 상자가 표시된 후 트리거되었습니다
• hide.bs.dropdown : 드롭 다운 상자가 숨겨지기 전에 트리거되었습니다
• hidden.bs.dropdown : 드롭 다운 상자가 숨겨진 후 트리거되었습니다

이러한 이벤트를 바인딩하려면 on() 메소드를 사용하십시오.

 <code class="javascript">dropdown.on('show.bs.dropdown', (e) => { // 在此添加要执行的操作}); dropdown.on('hidden.bs.dropdown', (e) => { // 在此添加要执行的操作});</code>

4. 드롭 다운 박스 방법에 전화하십시오

드롭 다운 클래스 방법을 사용하여 드롭 다운 박스의 동작을 제어 할 수 있습니다. 몇 가지 예는 다음과 같습니다.

• show () : 드롭 다운 상자 표시
• 숨기기 () : 드롭 다운 상자를 숨 깁니다
• 토글 () : 드롭 다운 상자의 디스플레이/숨겨진 상태 토글
• Dispose () : 드롭 다운 박스 인스턴스를 파괴하십시오

이 방법을 호출하려면 다음 구문을 사용하십시오.

 <code class="javascript">dropdown.show(); dropdown.hide(); dropdown.toggle(); dropdown.dispose();</code>

이 단계를 수행하면 JavaScript를 사용하여 부트 스트랩에서 드롭 다운 상자를 쉽게 바인딩하고 제어 할 수 있습니다.

위 내용은 부트 스트랩 드롭 다운 상자를 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!