ดรอปดาวน์

สลับการวางซ้อนตามบริบทเพื่อแสดงรายการลิงก์และอื่นๆ ด้วยปลั๊กอินดรอปดาวน์ Bootstrap

ในหน้านี้

ภาพรวม

ดรอปดาวน์สามารถสลับได้ การวางซ้อนตามบริบทสำหรับแสดงรายการลิงก์และอื่นๆ มีการโต้ตอบกับปลั๊กอิน JavaScript แบบเลื่อนลง Bootstrap ที่รวมอยู่ พวกเขากำลังสลับโดยการคลิก ไม่ใช่โดยการวางเมาส์เหนือ; นี่คือ การตัดสินใจออกแบบ โดยเจตนา

ดรอปดาวน์สร้างขึ้นบนไลบรารีของบุคคลที่สามPopperซึ่งให้ตำแหน่งแบบไดนามิกและการตรวจจับวิวพอร์ต อย่าลืมใส่popper.min.jsก่อน JavaScript ของ Bootstrap หรือใช้bootstrap.bundle.min.js/ bootstrap.bundle.jsซึ่งมี Popper Popper ไม่ได้ใช้เพื่อวางตำแหน่งดรอปดาวน์ใน navbars แม้ว่าจะไม่มีการกำหนดตำแหน่งแบบไดนามิก

การเข้าถึง

มาตรฐานWAI ARIAกำหนดrole="menu"วิดเจ็ต จริง แต่นี่เฉพาะสำหรับเมนูที่เหมือนแอปพลิเคชันซึ่งทริกเกอร์การทำงานหรือฟังก์ชัน เมนู ARIAมีได้เฉพาะรายการเมนู รายการเมนูช่องทำเครื่องหมาย รายการเมนูปุ่มตัวเลือก กลุ่มปุ่มตัวเลือก และเมนูย่อยเท่านั้น

ในทางกลับกัน ดรอปดาวน์ของ Bootstrap ได้รับการออกแบบมาให้เป็นแบบทั่วไปและใช้ได้กับสถานการณ์และโครงสร้างมาร์กอัปที่หลากหลาย ตัวอย่างเช่น สามารถสร้างดรอปดาวน์ที่มีอินพุตเพิ่มเติมและการควบคุมแบบฟอร์ม เช่น ช่องค้นหาหรือแบบฟอร์มการเข้าสู่ระบบ ด้วยเหตุนี้ Bootstrap จึงไม่คาดหวัง (หรือเพิ่มโดยอัตโนมัติ) roleและaria-แอตทริบิวต์ที่จำเป็นสำหรับเมนูARIA ที่แท้จริง ผู้เขียนจะต้องรวมคุณลักษณะเฉพาะเหล่านี้ไว้ด้วย

อย่างไรก็ตาม Bootstrap จะเพิ่มการรองรับในตัวสำหรับการโต้ตอบกับเมนูคีย์บอร์ดมาตรฐานส่วนใหญ่ เช่น ความสามารถในการย้ายผ่านแต่ละ.dropdown-itemองค์ประกอบโดยใช้ปุ่มเคอร์เซอร์และปิดเมนูด้วยESCปุ่ม

ตัวอย่าง

รวมการสลับของดรอปดาวน์ (ปุ่มหรือลิงก์ของคุณ) และเมนูดรอปดาวน์ภายใน หรือองค์ประกอบอื่น ที่.dropdownประกาศ position: relative;ดรอปดาวน์สามารถเรียกใช้จาก<a>หรือ<button>องค์ประกอบเพื่อให้เหมาะสมกับความต้องการที่เป็นไปได้ของคุณมากขึ้น ตัวอย่างที่แสดงที่นี่ใช้<ul>องค์ประกอบเชิงความหมายตามความเหมาะสม แต่รองรับมาร์กอัปที่กำหนดเอง

ปุ่มเดียว

ตัวเดียว.btnสามารถเปลี่ยนเป็นปุ่มสลับแบบเลื่อนลงได้โดยมีการเปลี่ยนแปลงมาร์กอัป ต่อไปนี้คือวิธีที่คุณสามารถนำไปใช้งานกับองค์ประกอบใด<button>องค์ประกอบหนึ่งได้:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

และด้วย<a>องค์ประกอบ:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

ส่วนที่ดีที่สุดคือคุณสามารถทำเช่นนี้กับปุ่มต่างๆ ได้เช่นกัน:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ปุ่มแยก

ในทำนองเดียวกัน สร้างดรอปดาวน์ของปุ่มแยกโดยมีมาร์กอัปเหมือนกันกับดรอปดาวน์ของปุ่มเดียว แต่มีการเพิ่ม.dropdown-toggle-splitระยะห่างที่เหมาะสมรอบๆ เครื่องหมายรูปหมวกแบบเลื่อนลง

เราใช้คลาสพิเศษนี้เพื่อลดแนวนอนpaddingที่ด้านใดด้านหนึ่งของคาเร็ตลง 25% และลบmargin-leftที่เพิ่มสำหรับดรอปดาวน์ของปุ่มปกติ การเปลี่ยนแปลงเพิ่มเติมเหล่านั้นทำให้คาเร็ตอยู่ตรงกลางปุ่มแยก และให้พื้นที่โจมตีที่มีขนาดเหมาะสมกว่าถัดจากปุ่มหลัก

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ขนาด

ดรอปดาวน์ของปุ่มใช้งานได้กับปุ่มทุกขนาด รวมถึงปุ่มดรอปดาวน์เริ่มต้นและปุ่มแบบแยก

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ดรอปดาวน์มืด

เลือกใช้ดรอปดาวน์ที่เข้มกว่าเพื่อจับคู่แถบนำทางสีเข้มหรือสไตล์ที่กำหนดเองโดยเพิ่ม.dropdown-menu-darkลงใน.dropdown-menuไฟล์ . ไม่จำเป็นต้องเปลี่ยนแปลงรายการดรอปดาวน์

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

และนำไปใช้ในแถบนำทาง:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ทิศทาง

RTL

ทิศทางจะถูกมิเรอร์เมื่อใช้ Bootstrap ใน RTL ความหมาย.dropstartจะปรากฏทางด้านขวา

ศูนย์กลาง

ทำให้เมนูดรอปดาวน์อยู่ตรงกลางด้านล่างของปุ่มสลับกับ.dropdown-centerองค์ประกอบหลัก

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

ทริกเกอร์เมนูแบบเลื่อนลงเหนือองค์ประกอบโดยเพิ่ม.dropupไปยังองค์ประกอบหลัก

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ดรอปอัพตรงกลาง

ทำให้เมนูดรอปอัพอยู่ตรงกลางเหนือปุ่มสลับกับ.dropup-centerองค์ประกอบหลัก

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

เมนูแบบเลื่อนลงทริกเกอร์ที่ด้านขวาขององค์ประกอบโดยการเพิ่ม.dropendองค์ประกอบหลัก

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

ทริกเกอร์เมนูแบบเลื่อนลงทางด้านซ้ายขององค์ประกอบโดยเพิ่ม.dropstartไปยังองค์ประกอบหลัก

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

คุณสามารถใช้<a>หรือ<button>องค์ประกอบเป็นรายการดรอปดาวน์

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

คุณยังสามารถสร้างรายการดรอปดาวน์ที่ไม่โต้ตอบด้วย.dropdown-item-text. รู้สึกอิสระที่จะจัดสไตล์เพิ่มเติมด้วย CSS หรือยูทิลิตี้ข้อความที่กำหนดเอง

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

คล่องแคล่ว

เพิ่ม.activeไปยังรายการในรายการดรอปดาวน์เพื่อจัดรูปแบบเป็นใช้งานอยู่ ในการถ่ายทอดสถานะใช้งานไปยังเทคโนโลยีช่วยเหลือ ให้ใช้aria-currentแอตทริบิวต์ — โดยใช้pageค่าสำหรับหน้าปัจจุบัน หรือtrueสำหรับรายการปัจจุบันในชุด

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

พิการ

เพิ่ม.disabledในรายการแบบเลื่อนลงเพื่อจัดรูปแบบเป็นปิดใช้งาน

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 100% จากด้านบนและด้านซ้ายของระดับบนสุดโดยอัตโนมัติ คุณสามารถเปลี่ยนสิ่งนี้ได้ด้วยคลาสทิศทาง.drop*แต่คุณยังสามารถควบคุมพวกมันได้ด้วยคลาสตัวปรับแต่งเพิ่มเติม

เพิ่ม.dropdown-menu-endเพื่อ.dropdown-menuจัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา ทิศทางจะถูกมิเรอร์เมื่อใช้ Bootstrap ใน RTL ความหมาย.dropdown-menu-endจะปรากฏทางด้านซ้าย

หัวขึ้น! ดรอปดาวน์อยู่ในตำแหน่งที่ต้องขอบคุณ Popper ยกเว้นเมื่ออยู่ในแถบนำทาง

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

การจัดตำแหน่งตอบสนอง

หากคุณต้องการใช้การจัดตำแหน่งแบบตอบสนอง ให้ปิดใช้งานการจัดตำแหน่งแบบไดนามิกโดยเพิ่มdata-bs-display="static"แอตทริบิวต์และใช้คลาสรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์

หากต้องการจัดแนวเมนูแบบเลื่อนลงให้ตรงกับเบรกพอยต์ที่กำหนดหรือใหญ่กว่าให้.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-endเพิ่ม

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

หากต้องการจัดวางเมนูแบบเลื่อนลงทางซ้าย ด้วยเบรกพอยต์ที่กำหนดหรือใหญ่ กว่า ให้เพิ่ม .dropdown-menu-endและ.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

โปรดทราบว่าคุณไม่จำเป็นต้องเพิ่มdata-bs-display="static"แอตทริบิวต์ให้กับปุ่มดรอปดาวน์ในแถบนำทาง เนื่องจากไม่มีการใช้ Popper ในแถบนำทาง

ตัวเลือกการจัดตำแหน่ง

จากตัวเลือกส่วนใหญ่ที่แสดงด้านบน ต่อไปนี้คือตัวอย่างอ่างล้างจานขนาดเล็กของตัวเลือกการจัดตำแหน่งแบบเลื่อนลงในที่เดียว

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

ส่วนหัว

เพิ่มส่วนหัวเพื่อติดป้ายกำกับส่วนของการดำเนินการในเมนูแบบเลื่อนลง

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

วงเวียน

แยกกลุ่มรายการเมนูที่เกี่ยวข้องด้วยตัวแบ่ง

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

ข้อความ

วางข้อความรูปแบบอิสระภายในเมนูดรอปดาวน์ที่มีข้อความ และใช้ ยูทิลิตี้ การเว้นวรรค โปรดทราบว่าคุณอาจต้องใช้รูปแบบการปรับขนาดเพิ่มเติมเพื่อจำกัดความกว้างของเมนู

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

แบบฟอร์ม

ใส่แบบฟอร์มในเมนูดรอปดาวน์ หรือทำให้เป็นเมนูดรอปดาวน์ และใช้ยูทิลิตี้ระยะขอบหรือช่องว่างภายในเพื่อให้มีพื้นที่ว่างในเชิงลบที่คุณต้องการ

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

ใช้data-bs-offsetหรือdata-bs-referenceเพื่อเปลี่ยนตำแหน่งของรายการแบบเลื่อนลง

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

พฤติกรรมปิดอัตโนมัติ

โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะปิดเมื่อคลิกภายในหรือภายนอกเมนูแบบเลื่อนลง คุณสามารถใช้autoCloseตัวเลือกเพื่อเปลี่ยนลักษณะการทำงานนี้ของรายการแบบเลื่อนลง

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

ตัวแปร

เพิ่มใน v5.2.0

ในฐานะที่เป็นส่วนหนึ่งของแนวทางการพัฒนาตัวแปร CSS ของ Bootstrap ดรอปดาวน์จึงใช้ตัวแปร CSS ใน.dropdown-menuเครื่องเพื่อการปรับแต่งตามเวลาจริงที่ได้รับการปรับปรุง ค่าสำหรับตัวแปร CSS ถูกกำหนดผ่าน Sass ดังนั้นยังคงรองรับการปรับแต่ง Sass ด้วยเช่นกัน

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

การปรับแต่งผ่านตัวแปร CSS สามารถเห็นได้ใน.dropdown-menu-darkคลาสที่เราแทนที่ค่าเฉพาะโดยไม่ต้องเพิ่มตัวเลือก CSS ที่ซ้ำกัน

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

ตัวแปร Sass

ตัวแปรสำหรับดรอปดาวน์ทั้งหมด:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

ตัวแปรสำหรับดรอปดาวน์ที่มืด :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

ตัวแปรสำหรับคาเร็ตแบบ CSS ซึ่งระบุการโต้ตอบของดรอปดาวน์:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

มิกซ์อิน

มิกซ์อินถูกใช้เพื่อสร้างคาเร็ตแบบ CSS และสามารถพบได้ในscss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript ปลั๊กอินแบบเลื่อนลงจะสลับเนื้อหาที่ซ่อนอยู่ (เมนูแบบเลื่อนลง) โดยการสลับ.showคลาสบนพา.dropdown-menuเรนต์ แอตทริบิวต์data-bs-toggle="dropdown"นี้ใช้สำหรับการปิดเมนูแบบเลื่อนลงที่ระดับแอปพลิเคชัน ดังนั้นจึงควรใช้แอตทริบิวต์นี้เสมอ

บนอุปกรณ์ที่เปิดใช้งานระบบสัมผัส การเปิดดรอปดาวน์จะเพิ่ม mouseoverตัวจัดการที่ว่างเปล่าให้กับลูกที่อยู่ใกล้เคียงของ <body>องค์ประกอบ การแฮ็กที่น่าเกลียดที่ยอมรับได้นี้เป็นสิ่งจำเป็นเพื่อแก้ไขจุด บกพร่องในการมอบสิทธิ์เหตุการณ์ของ iOSซึ่งมิฉะนั้นจะป้องกันไม่ให้แตะที่ใดก็ได้นอกดรอปดาวน์จากการเรียกรหัสที่ปิดรายการแบบเลื่อนลง เมื่อปิดรายการแบบหล่นลง ตัวจัดการว่างเพิ่มเติมเหล่านี้ mouseoverจะถูกลบออก

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มdata-bs-toggle="dropdown"ในลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ผ่านจาวาสคริปต์

เรียกดรอปดาวน์ผ่าน JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`ยังต้องการ

ไม่ว่าคุณจะเรียกดรอปดาวน์ของคุณผ่าน JavaScript หรือใช้ data-api แทน คุณdata-bs-toggle="dropdown"จำเป็นต้องแสดงบนองค์ประกอบทริกเกอร์ของดรอปดาวน์เสมอ

ตัวเลือก

เนื่องจากตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript คุณจึงเพิ่มชื่อตัวเลือกต่อท้ายได้ เช่น เดียวdata-bs-กับใน data-bs-animation="{value}"ตรวจสอบให้แน่ใจว่าได้เปลี่ยนประเภทเคสของชื่อตัวเลือกจาก “ camelCase ” เป็น “ kebab-case ” เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ data เช่น ใช้data-bs-custom-class="beautifier"แทนdata-bs-customClass="beautifier".

ใน Bootstrap 5.2.0 ส่วนประกอบทั้งหมดสนับสนุนแอตทริบิวต์ข้อมูลที่สงวนไว้สำหรับทดลองdata-bs-configซึ่งสามารถจัดเก็บการกำหนดค่าส่วนประกอบอย่างง่ายเป็นสตริง JSON เมื่อองค์ประกอบมีdata-bs-config='{"delay":0, "title":123}'และdata-bs-title="456"แอตทริบิวต์ ค่าสุดท้ายtitleจะเป็น456และแอตทริบิวต์ข้อมูลที่แยกจากกันจะแทนที่ค่าที่ให้ไว้data-bs-configใน นอกจากนี้ แอตทริบิวต์ข้อมูลที่มีอยู่ยังสามารถเก็บค่า JSON เช่นdata-bs-delay='{"show":0,"hide":150}'.

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
`autoClose`	บูลีน, สตริง	`true`	กำหนดค่าพฤติกรรมการปิดอัตโนมัติของดรอปดาวน์: `true`- ดรอปดาวน์จะถูกปิดโดยการคลิกภายนอกหรือภายในเมนูดรอปดาวน์ `false`- ดรอปดาวน์จะถูกปิดโดยคลิกที่ปุ่มสลับและโทร`hide`หรือ`toggle`วิธีการ ด้วยตนเอง (ยังไม่ปิดด้วยการกด`esc`ปุ่ม) `'inside'`- ดรอปดาวน์จะปิดลง (เท่านั้น) โดยคลิกภายในเมนูดรอปดาวน์ `'outside'`- ดรอปดาวน์จะปิดลง (เท่านั้น) โดยคลิกที่ด้านนอกเมนูดรอปดาวน์ หมายเหตุ: ดรอปดาวน์สามารถปิดได้ด้วย`ESC`คีย์เสมอ
`boundary`	สตริง องค์ประกอบ	`'clippingParents'`	ขอบเขตจำกัดโอเวอร์โฟลว์ของเมนูดรอปดาวน์ (ใช้เฉพาะกับตัวแก้ไขป้องกันโอเวอร์โฟลว์ของ Popper) โดยค่าเริ่มต้น จะเป็น`clippingParents`และสามารถยอมรับการอ้างอิง HTMLElement (ผ่าน JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดูที่เอกสาร detectOverflowของ Popper
`display`	สตริง	`'dynamic'`	โดยค่าเริ่มต้น เราใช้ Popper สำหรับการจัดตำแหน่งแบบไดนามิก ปิดใช้งานสิ่งนี้ด้วย`static`.
`offset`	อาร์เรย์ สตริง ฟังก์ชัน	`[0, 2]`	ออฟเซ็ตของดรอปดาวน์ที่สัมพันธ์กับเป้าหมาย คุณสามารถส่งสตริงในแอตทริบิวต์ข้อมูลด้วยค่าที่คั่นด้วยเครื่องหมายจุลภาค เช่น`data-bs-offset="10,20"`: เมื่อใช้ฟังก์ชันเพื่อกำหนดออฟเซ็ต ฟังก์ชันจะถูกเรียกด้วยออบเจ็กต์ที่มีการจัดวางแบบป๊อปเปอร์ การอ้างอิง และการแก้ไขแบบป๊อปอัปเป็นอาร์กิวเมนต์แรก องค์ประกอบทริกเกอร์โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สอง ฟังก์ชันต้องส่งคืนอาร์เรย์ที่มีตัวเลขสองตัว: skidding , distance สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper
`popperConfig`	null วัตถุ ฟังก์ชัน	`null`	หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดู การกำหนดค่า ของPopper เมื่อใช้ฟังก์ชันเพื่อสร้างการกำหนดค่า Popper ฟังก์ชันนี้จะถูกเรียกใช้ด้วยอ็อบเจ็กต์ที่มีการกำหนดค่า Popper เริ่มต้นของ Bootstrap ช่วยให้คุณใช้และรวมค่าเริ่มต้นเข้ากับการกำหนดค่าของคุณเอง ฟังก์ชันต้องส่งคืนอ็อบเจ็กต์การกำหนดค่าสำหรับ Popper
`reference`	สตริง องค์ประกอบ วัตถุ	`'toggle'`	องค์ประกอบอ้างอิงของเมนูแบบเลื่อนลง ยอมรับค่าของ`'toggle'`, `'parent'`, การอ้างอิง HTMLElement หรืออ็อบเจ็กต์ที่`getBoundingClientRect`ให้ สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารคอนสตรั ค เตอร์ของPopper และ เอกสาร องค์ประกอบเสมือน

การใช้ฟังก์ชันกับ`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

วิธีการ

วิธี	คำอธิบาย
`dispose`	ทำลายรายการดรอปดาวน์ขององค์ประกอบ (ลบข้อมูลที่เก็บไว้ในองค์ประกอบ DOM)
`getInstance`	วิธีการแบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แบบเลื่อนลงที่เกี่ยวข้องกับองค์ประกอบ DOM คุณสามารถใช้ได้ดังนี้`bootstrap.Dropdown.getInstance(element)`:
`getOrCreateInstance`	วิธีการแบบคงที่ซึ่งส่งคืนอินสแตนซ์แบบเลื่อนลงที่เกี่ยวข้องกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น คุณสามารถใช้สิ่งนี้: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	ซ่อนเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`show`	แสดงเมนูแบบเลื่อนลงของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`toggle`	สลับเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`update`	อัปเดตตำแหน่งของรายการแบบเลื่อนลงขององค์ประกอบ

เหตุการณ์

เหตุการณ์ดรอปดาวน์ทั้งหมดเริ่มต้นที่องค์ประกอบการสลับแล้วทำให้เป็นฟองขึ้น ดังนั้นคุณสามารถเพิ่มตัวฟังเหตุการณ์ใน.dropdown-menuองค์ประกอบหลักของ ' hide.bs.dropdownและhidden.bs.dropdownเหตุการณ์มีclickEventคุณสมบัติ (เฉพาะเมื่อประเภทเหตุการณ์ดั้งเดิมคือclick) ที่มีวัตถุเหตุการณ์สำหรับเหตุการณ์การคลิก

ประเภทงาน	คำอธิบาย
`hide.bs.dropdown`	เริ่มทำงานทันทีเมื่อ`hide`มีการเรียกใช้เมธอดของอินสแตนซ์
`hidden.bs.dropdown`	เริ่มทำงานเมื่อรายการดรอปดาวน์ถูกซ่อนจากผู้ใช้เสร็จแล้ว และการเปลี่ยน CSS เสร็จสิ้น
`show.bs.dropdown`	เริ่มทำงานทันทีเมื่อมี`show`การเรียกใช้เมธอดของอินสแตนซ์
`shown.bs.dropdown`	เริ่มทำงานเมื่อผู้ใช้มองเห็นเมนูแบบเลื่อนลงและการเปลี่ยน CSS เสร็จสิ้นแล้ว

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

ดรอปดาวน์

ภาพรวม

การเข้าถึง

ตัวอย่าง

ปุ่มเดียว

ปุ่มแยก

ขนาด

ดรอปดาวน์มืด

ทิศทาง

RTL

ศูนย์กลาง

Dropup

ดรอปอัพตรงกลาง

Dropend

Dropstart

รายการเมนู

คล่องแคล่ว

พิการ

การจัดตำแหน่งเมนู

การจัดตำแหน่งตอบสนอง

ตัวเลือกการจัดตำแหน่ง

เนื้อหาเมนู

ส่วนหัว

วงเวียน

ข้อความ

แบบฟอร์ม

พฤติกรรมปิดอัตโนมัติ

CSS

ตัวแปร

ตัวแปร Sass

มิกซ์อิน

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

ผ่านจาวาสคริปต์

`data-bs-toggle="dropdown"`ยังต้องการ

ตัวเลือก

การใช้ฟังก์ชันกับ`popperConfig`

วิธีการ

เหตุการณ์

ดรอปดาวน์

ภาพรวม

การเข้าถึง

ตัวอย่าง

ปุ่มเดียว

ปุ่มแยก

ขนาด

ดรอปดาวน์มืด

ทิศทาง

RTL

ศูนย์กลาง

Dropup

ดรอปอัพตรงกลาง

Dropend

Dropstart

รายการเมนู

คล่องแคล่ว

พิการ

การจัดตำแหน่งเมนู

การจัดตำแหน่งตอบสนอง

ตัวเลือกการจัดตำแหน่ง

เนื้อหาเมนู

ส่วนหัว

ส่วนหัวแบบเลื่อนลง

วงเวียน

ข้อความ

แบบฟอร์ม

ตัวเลือกแบบเลื่อนลง

พฤติกรรมปิดอัตโนมัติ

CSS

ตัวแปร

ตัวแปร Sass

มิกซ์อิน

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

ผ่านจาวาสคริปต์

data-bs-toggle="dropdown"ยังต้องการ

ตัวเลือก

การใช้ฟังก์ชันกับpopperConfig

วิธีการ

เหตุการณ์

`data-bs-toggle="dropdown"`ยังต้องการ

การใช้ฟังก์ชันกับ`popperConfig`