ดรอปดาวน์

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

ภาพรวม

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

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

หากคุณกำลังสร้าง 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 show">
  <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>

โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 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>

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

<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">
  <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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

เพิ่ม.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="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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	ออฟเซ็ตของดรอปดาวน์ที่สัมพันธ์กับเป้าหมาย สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารออฟเซ็ตของPopper.js
พลิก	บูลีน	จริง	อนุญาตให้รายการแบบเลื่อนลงพลิกในกรณีที่องค์ประกอบอ้างอิงทับซ้อนกัน สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสารพลิกของPopper.js
เขตแดน	สตริง \| ธาตุ	'เลื่อนผู้ปกครอง'	ขอบเขตข้อจำกัดล้นของเมนูดรอปดาวน์ ยอมรับค่าของ`'viewport'`, `'window'`, `'scrollParent'`, หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูลเพิ่มเติม โปรดดู เอกสาร preventOverflow ของPopper.js

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

วิธีการ

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

กิจกรรม

เหตุการณ์แบบเลื่อนลงทั้งหมดเริ่มต้นที่.dropdown-menuองค์ประกอบหลักของ ' และมีrelatedTargetคุณสมบัติซึ่งมีค่าเป็นองค์ประกอบการสลับจุดยึด

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

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

ดรอปดาวน์

ภาพรวม

การเข้าถึง

ตัวอย่าง

ดรอปดาวน์ปุ่มเดียว

แยกปุ่มดรอปดาวน์

ขนาด

รูปแบบ Dropup

รูปแบบ Dropright

รูปแบบ Dropleft

รายการเมนู

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

ส่วนหัวของเมนู

ตัวแบ่งเมนู

แบบฟอร์มเมนู

รายการเมนูที่ใช้งานอยู่

รายการเมนูสำหรับผู้พิการ

การใช้งาน

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

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

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

ตัวเลือก

วิธีการ

กิจกรรม

ดรอปดาวน์

ภาพรวม

การเข้าถึง

ตัวอย่าง

ดรอปดาวน์ปุ่มเดียว

แยกปุ่มดรอปดาวน์

ขนาด

รูปแบบ Dropup

รูปแบบ Dropright

รูปแบบ Dropleft

รายการเมนู

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

ส่วนหัวของเมนู

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

ตัวแบ่งเมนู

แบบฟอร์มเมนู

รายการเมนูที่ใช้งานอยู่

รายการเมนูสำหรับผู้พิการ

การใช้งาน

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

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

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

ตัวเลือก

วิธีการ

กิจกรรม

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