ดรอปดาวน์

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

ภาพรวม

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

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

หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการutil.js .

การเข้าถึง

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

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

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

ตัวอย่าง

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

ปุ่มเดียว

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

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

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

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ขนาด

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

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ทิศทาง

Dropup

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

เนื้อหาเมนูดรอปดาวน์ในอดีตต้องเป็นลิงก์ แต่กรณีนี้ไม่ใช่ v4 อีกต่อไป ตอนนี้คุณสามารถเลือกใช้<button>องค์ประกอบในเมนูดร็อปดาวน์ของคุณ แทนที่จะใช้เพียง<a>s

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

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

คล่องแคล่ว

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

พิการ

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 100% จากด้านบนและด้านซ้ายของระดับบนสุดโดยอัตโนมัติ เพิ่ม.dropdown-menu-rightเพื่อ.dropdown-menuจัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา

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

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

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

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

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

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

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

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

ส่วนหัว

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

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

วงเวียน

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

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

ข้อความ

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

<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>

แบบฟอร์ม

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

การใช้งาน

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

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

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

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

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

$('.dropdown-toggle').dropdown()

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

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

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset="".

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
offset	หมายเลข \| สตริง \| การทำงาน	0	ออฟเซ็ตของดรอปดาวน์ที่สัมพันธ์กับเป้าหมาย เมื่อใช้ฟังก์ชันเพื่อกำหนดออฟเซ็ต ฟังก์ชันจะถูกเรียกด้วยอ็อบเจ็กต์ที่มีข้อมูลออฟเซ็ตเป็นอาร์กิวเมนต์แรก ฟังก์ชันต้องส่งคืนวัตถุที่มีโครงสร้างเดียวกัน องค์ประกอบทริกเกอร์โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สอง สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper.js
พลิก	บูลีน	จริง	อนุญาตให้รายการแบบเลื่อนลงพลิกในกรณีที่องค์ประกอบอ้างอิงทับซ้อนกัน สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพลิกของPopper.js
เขตแดน	สตริง \| ธาตุ	'เลื่อนผู้ปกครอง'	ขอบเขตข้อจำกัดล้นของเมนูดรอปดาวน์ ยอมรับค่าของ`'viewport'`, `'window'`, `'scrollParent'`, หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสาร preventOverflow ของPopper.js
อ้างอิง	สตริง \| ธาตุ	'สลับ'	องค์ประกอบอ้างอิงของเมนูแบบเลื่อนลง ยอมรับค่าของ`'toggle'`, `'parent'`หรือการอ้างอิง HTMLElement สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสาร referenceObjectของPopper.js
แสดง	สตริง	'พลวัต'	โดยค่าเริ่มต้น เราใช้ Popper.js สำหรับการจัดตำแหน่งแบบไดนามิก ปิดใช้งานสิ่งนี้ด้วย`static`.
popperConfig	null \| วัตถุ	โมฆะ	หากต้องการเปลี่ยนการกำหนดค่า Popper.js เริ่มต้นของ Bootstrap โปรดดูการกำหนดค่าของ Popper.js

โปรดทราบว่าเมื่อboundaryตั้งค่าเป็นค่าอื่น'scrollParent'ที่ไม่ใช่ สไตล์position: staticจะถูกนำไปใช้กับ.dropdownคอนเทนเนอร์

วิธีการ

วิธี	คำอธิบาย
`$().dropdown('toggle')`	สลับเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`$().dropdown('show')`	แสดงเมนูแบบเลื่อนลงของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`$().dropdown('hide')`	ซ่อนเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
`$().dropdown('update')`	อัปเดตตำแหน่งของรายการแบบเลื่อนลงขององค์ประกอบ
`$().dropdown('dispose')`	ทำลายรายการดรอปดาวน์ขององค์ประกอบ

เหตุการณ์

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})