Source

ดรอปดาวน์

สลับการวางซ้อนตามบริบทเพื่อแสดงรายการลิงก์และอื่นๆ ด้วยปลั๊กอินดรอปดาวน์ 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="#">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>

ส่วนหัว

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

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

ใช้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-offset="".

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

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

วิธีการ

วิธี คำอธิบาย
$().dropdown('toggle') สลับเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ
$().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…
})