תפריטים נפתחים

החלף בין שכבות-על הקשריות להצגת רשימות של קישורים ועוד באמצעות הפלאגין הנפתח 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">
  <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משני צדי ה-caret ב-25% ולהסיר את margin-leftהתוספת של כפתורים רגילים. השינויים הנוספים האלה שומרים על ה-caret במרכז בלחצן הפיצול ומספקים אזור פגיעה בגודל מתאים יותר ליד הכפתור הראשי.

<!-- 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לרכיב האב.

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

התקשר לתפריטים הנפתחים באמצעות JavaScript:

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

`data-toggle="dropdown"`עדיין נדרש

לא משנה אם אתה קורא לתפריט הנפתח שלך באמצעות JavaScript או במקום זאת משתמש ב-data-api, data-toggle="dropdown"תמיד נדרש להיות נוכח ברכיב ההדק של התפריט הנפתח.

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-offset="".

שֵׁם	סוּג	בְּרִירַת מֶחדָל	תיאור
לְקַזֵז	מספר \| מחרוזת \| פוּנקצִיָה	0	היסט של התפריט הנפתח ביחס ליעד שלה. כאשר משתמשים בפונקציה לקביעת ההיסט, היא נקראת עם אובייקט המכיל את נתוני ההיסט כארגומנט הראשון שלה. הפונקציה חייבת להחזיר אובייקט בעל אותו מבנה. הצומת DOM הגורם המפעיל מועבר כארגומנט השני. למידע נוסף עיין במסמכי האופסט של Popper.js .
לְהַעִיף	בוליאני	נָכוֹן	אפשר ל-Dropdown להתהפך במקרה של חפיפה ברכיב ההפניה. למידע נוסף, עיין במסמכי היפוך של Popper.js .
גְבוּל	מחרוזת \| אֵלֵמֶנט	'סcrollPrent'	גבול אילוץ הצפת של התפריט הנפתח. מקבל את הערכים של `'viewport'`, `'window'`, `'scrollParent'`או הפניה ל-HTMLElement (JavaScript בלבד). למידע נוסף עיין במסמכי preventOverflow של Popper.js .
התייחסות	מחרוזת \| אֵלֵמֶנט	'לְמַתֵג'	רכיב התייחסות של התפריט הנפתח. מקבל את הערכים של `'toggle'`, `'parent'`, או הפניה ל-HTMLElement. למידע נוסף עיין ב-referensObject docs של 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רכיב האב 's ויש להם relatedTargetמאפיין, שהערך שלו הוא רכיב העוגן המתחלף. hide.bs.dropdownולאירועים hidden.bs.dropdownיש clickEventמאפיין (רק כאשר סוג האירוע המקורי הוא click) המכיל אובייקט אירוע עבור אירוע הקליק.

מִקרֶה	תיאור
`show.bs.dropdown`	אירוע זה מופעל מיד כאשר קוראים לשיטת המופע של המופע.
`shown.bs.dropdown`	אירוע זה מופעל כאשר התפריט הנפתח הפך לגלוי למשתמש (יחכה למעברי CSS, כדי להשלים).
`hide.bs.dropdown`	אירוע זה מופעל מיד כאשר שיטת הסתר המופע נקראה.
`hidden.bs.dropdown`	אירוע זה מופעל כאשר הסתיימה התפריט הנפתח להסתרת מהמשתמש (יחכה למעברי CSS, כדי להשלים).

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