집 >웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용해도 Bootstrap 5 탐색 모음 드롭다운이 작동하지 않는 이유는 무엇입니까?

jQuery를 사용해도 Bootstrap 5 탐색 모음 드롭다운이 작동하지 않는 이유는 무엇입니까?

Susan Sarandon원래의: 2024-12-08 19:32:14170검색

Why isn't my Bootstrap 5 navbar dropdown working even with jQuery?

Bootstrap 5 Navbar 드롭다운 문제

Bootstrap 5를 사용하여 반응형 탐색 메뉴를 구현하려고 할 때 드롭다운 버튼이 나타나는 문제가 발생할 수 있습니다. 또는 메뉴 항목이 의도한 대로 작동하지 않습니다. 이 문제는 프로젝트에 jQuery가 포함된 경우에도 발생할 수 있습니다.

원인

Bootstrap 5에서는 JavaScript 플러그인의 data-* 속성이 변경되었습니다. 이전에는 data-toggle과 data-target을 사용했으나 Bootstrap 5에서는 각각 data-bs-toggle과 data-bs-target으로 대체되었습니다.

해결책

문제를 해결하려면 이전 data- 속성을 새 data-bs-로 바꾸세요. 속성:

<button>

추가 고려 사항

data-* 속성 변경 외에도 Bootstrap 5에는 다른 변경 사항도 도입되었습니다. 예를 들어 ml-auto 및 mr-auto 클래스는 ms-auto 및 me-auto로 대체되었습니다.

Demo

이 코드 조각은 작동하는 드롭다운을 보여줍니다. 버튼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link
        href="https://cdn.jsdelivr.net/npm/[email&#160;protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous"
    />
</head>
<body>
    <nav>

위 내용은 jQuery를 사용해도 Bootstrap 5 탐색 모음 드롭다운이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript jquery bootstrap for auto using function this issue mr Other

성명：

이전 기사：JavaScript 배열에서 특정 속성을 가진 개체를 어떻게 효율적으로 찾을 수 있습니까?다음 기사：JavaScript 배열에서 특정 속성을 가진 개체를 어떻게 효율적으로 찾을 수 있습니까?