ดรอปดาวน์
สลับการวางซ้อนตามบริบทเพื่อแสดงรายการลิงก์และอื่นๆ ด้วยปลั๊กอินดรอปดาวน์ Bootstrap
ภาพรวม
ดรอปดาวน์สามารถสลับได้ การวางซ้อนตามบริบทสำหรับแสดงรายการลิงก์และอื่นๆ มีการโต้ตอบกับปลั๊กอิน JavaScript แบบเลื่อนลง Bootstrap ที่รวมอยู่ พวกเขากำลังสลับโดยการคลิก ไม่ใช่โดยการวางเมาส์เหนือ; นี่คือ การตัดสินใจออกแบบ โดยเจตนา
ดรอปดาวน์สร้างขึ้นบนไลบรารีของบุคคลที่สามPopperซึ่งให้ตำแหน่งแบบไดนามิกและการตรวจจับวิวพอร์ต อย่าลืมใส่popper.min.jsก่อน JavaScript ของ Bootstrap หรือใช้bootstrap.bundle.min.js
/ bootstrap.bundle.js
ซึ่งมี Popper Popper ไม่ได้ใช้เพื่อวางตำแหน่งดรอปดาวน์ใน 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" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</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>
</div>
และด้วย<a>
องค์ประกอบ:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</div>
ส่วนที่ดีที่สุดคือคุณสามารถทำเช่นนี้กับปุ่มต่างๆ ได้เช่นกัน:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" 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-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-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-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-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-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-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-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-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-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-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">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
การจัดตำแหน่งเมนู
โดยค่าเริ่มต้น เมนูแบบเลื่อนลงจะอยู่ในตำแหน่ง 100% จากด้านบนและด้านซ้ายของระดับบนสุดโดยอัตโนมัติ เพิ่ม.dropdown-menu-right
เพื่อ.dropdown-menu
จัดตำแหน่งเมนูดรอปดาวน์ให้ชิดขวา
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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-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-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 ในแถบนำทาง
เนื้อหาเมนู
ส่วนหัว
เพิ่มส่วนหัวเพื่อติดป้ายกำกับส่วนของการดำเนินการในเมนูแบบเลื่อนลง
<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" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</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>
</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-toggle="dropdown" aria-expanded="false" data-reference="parent">
<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>
</div>
การใช้งาน
ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript ปลั๊กอินแบบเลื่อนลงจะสลับเนื้อหาที่ซ่อนอยู่ (เมนูแบบเลื่อนลง) โดยการสลับ.show
คลาสบนพา.dropdown-menu
เรนต์ แอตทริบิวต์data-toggle="dropdown"
นี้ใช้สำหรับการปิดเมนูแบบเลื่อนลงที่ระดับแอปพลิเคชัน ดังนั้นจึงควรใช้แอตทริบิวต์นี้เสมอ
$.noop
)
mouseover
ให้กับลูกที่อยู่ใกล้เคียงของ
<body>
องค์ประกอบ การแฮ็กที่น่าเกลียดที่ยอมรับได้นี้เป็นสิ่งจำเป็นเพื่อแก้ไขจุด
บกพร่องในการมอบสิทธิ์เหตุการณ์ของ iOSซึ่งมิฉะนั้นจะป้องกันไม่ให้แตะที่ใดก็ได้นอกดรอปดาวน์จากการเรียกรหัสที่ปิดรายการแบบเลื่อนลง เมื่อปิดรายการแบบหล่นลง ตัวจัดการว่างเพิ่มเติมเหล่านี้
mouseover
จะถูกลบออก
ผ่านแอตทริบิวต์ข้อมูล
เพิ่มdata-toggle="dropdown"
ในลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
ผ่านจาวาสคริปต์
เรียกดรอปดาวน์ผ่าน JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ยังต้องการ
ไม่ว่าคุณจะเรียกดรอปดาวน์ของคุณผ่าน JavaScript หรือใช้ data-api แทน คุณdata-toggle="dropdown"
จำเป็นต้องแสดงบนองค์ประกอบทริกเกอร์ของดรอปดาวน์เสมอ
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-offset=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
offset | หมายเลข | สตริง | การทำงาน | 0 | ออฟเซ็ตของดรอปดาวน์ที่สัมพันธ์กับเป้าหมาย เมื่อใช้ฟังก์ชันเพื่อกำหนดออฟเซ็ต ฟังก์ชันจะถูกเรียกด้วยอ็อบเจ็กต์ที่มีข้อมูลออฟเซ็ตเป็นอาร์กิวเมนต์แรก ฟังก์ชันต้องส่งคืนวัตถุที่มีโครงสร้างเดียวกัน องค์ประกอบทริกเกอร์โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สอง |
พลิก | บูลีน | จริง | อนุญาตให้รายการแบบเลื่อนลงพลิกในกรณีที่องค์ประกอบอ้างอิงทับซ้อนกัน สำหรับข้อมูล เพิ่มเติม โปรดดู เอกสารพลิกของ Popper |
เขตแดน | สตริง | ธาตุ | 'เลื่อนผู้ปกครอง' | ขอบเขตข้อจำกัดล้นของเมนูดรอปดาวน์ ยอมรับค่าของ'viewport' , 'window' , 'scrollParent' , หรือการอ้างอิง HTMLElement (JavaScript เท่านั้น) สำหรับข้อมูล เพิ่มเติม โปรดดู เอกสาร preventOverflowของ Popper |
อ้างอิง | สตริง | ธาตุ | 'สลับ' | องค์ประกอบอ้างอิงของเมนูแบบเลื่อนลง ยอมรับค่าของ'toggle' , 'parent' หรือการอ้างอิง HTMLElement สำหรับข้อมูล เพิ่มเติม โปรดดู เอกสาร referenceObjectของ Popper |
แสดง | สตริง | 'พลวัต' | โดยค่าเริ่มต้น เราใช้ Popper สำหรับการจัดตำแหน่งแบบไดนามิก ปิดใช้งานสิ่งนี้ด้วยstatic . |
popperConfig | null | วัตถุ | โมฆะ | หากต้องการเปลี่ยนการกำหนดค่า Popper เริ่มต้นของ Bootstrap โปรดดูการกำหนดค่าของ Popper |
โปรดทราบว่าเมื่อ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...
})