Αναπτυσσόμενα
Εναλλάξτε τις επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και άλλων με την αναπτυσσόμενη προσθήκη Bootstrap.
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Τα αναπτυσσόμενα μενού είναι εναλλάξιμα, επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και πολλά άλλα. Γίνονται διαδραστικά με το αναπτυσσόμενο πρόσθετο JavaScript Bootstrap που περιλαμβάνεται. Εναλλάσσονται κάνοντας κλικ, όχι με το αιώρηση. αυτή είναι μια σκόπιμη απόφαση σχεδιασμού .
Τα αναπτυσσόμενα μενού είναι χτισμένα σε μια βιβλιοθήκη τρίτου μέρους, την Popper , η οποία παρέχει δυναμική τοποθέτηση και ανίχνευση θυρών προβολής. Φροντίστε να συμπεριλάβετε το popper.min.js πριν από την JavaScript του Bootstrap ή χρησιμοποιήστε το bootstrap.bundle.min.js
/ bootstrap.bundle.js
που περιέχει Popper. Το Popper δεν χρησιμοποιείται για την τοποθέτηση αναπτυσσόμενων στοιχείων σε γραμμές πλοήγησης, αν και δεν απαιτείται δυναμική τοποθέτηση.
Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js
.
Προσιτότητα
Το πρότυπο WAI ARIA ορίζει ένα πραγματικό role="menu"
γραφικό στοιχείο , αλλά αυτό είναι συγκεκριμένο για μενού που μοιάζουν με εφαρμογές που ενεργοποιούν ενέργειες ή λειτουργίες. Τα μενού ARIA μπορούν να περιέχουν μόνο στοιχεία μενού, στοιχεία μενού πλαισίου ελέγχου, στοιχεία μενού κουμπιών επιλογής, ομάδες κουμπιών επιλογής και υπομενού.
Τα αναπτυσσόμενα μενού του Bootstrap, από την άλλη πλευρά, έχουν σχεδιαστεί για να είναι γενικά και να εφαρμόζονται σε μια ποικιλία καταστάσεων και δομών σήμανσης. Για παράδειγμα, είναι δυνατό να δημιουργηθούν αναπτυσσόμενα μενού που περιέχουν πρόσθετες εισόδους και στοιχεία ελέγχου φορμών, όπως πεδία αναζήτησης ή φόρμες σύνδεσης. Για αυτόν τον λόγο, το Bootstrap δεν αναμένει (ούτε προσθέτει αυτόματα) κανένα από τα χαρακτηριστικά role
και aria-
που απαιτούνται για τα πραγματικά μενού ARIA . Οι συγγραφείς θα πρέπει να συμπεριλάβουν οι ίδιοι αυτά τα πιο συγκεκριμένα χαρακτηριστικά.
Ωστόσο, το Bootstrap προσθέτει ενσωματωμένη υποστήριξη για τις περισσότερες τυπικές αλληλεπιδράσεις μενού πληκτρολογίου, όπως τη δυνατότητα μετακίνησης σε μεμονωμένα .dropdown-item
στοιχεία χρησιμοποιώντας τα πλήκτρα του δρομέα και το κλείσιμο του μενού με το ESCπλήκτρο.
Παραδείγματα
Τυλίξτε την εναλλαγή του αναπτυσσόμενου μενού (το κουμπί ή ο σύνδεσμός σας) και το αναπτυσσόμενο μενού εντός .dropdown
ή σε άλλο στοιχείο που δηλώνει position: relative;
. Τα αναπτυσσόμενα μενού μπορούν να ενεργοποιηθούν από <a>
ή <button>
στοιχεία για να ταιριάζουν καλύτερα στις πιθανές ανάγκες σας.
Μονό κουμπί
Οποιοδήποτε single .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
στο a .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>
στοιχείου. Αυτό το ομολογουμένως άσχημο hack είναι απαραίτητο για να επιλύσετε μια
ιδιορρυθμία στην αποστολή συμβάντων του 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
Καλέστε τα αναπτυσσόμενα μενού μέσω JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
απαιτείται ακόμη
Ανεξάρτητα από το αν καλείτε το αναπτυσσόμενο μενού μέσω JavaScript ή αντ' αυτού χρησιμοποιείτε το data-api, data-toggle="dropdown"
απαιτείται πάντα να υπάρχει στο στοιχείο ενεργοποίησης του αναπτυσσόμενου μενού.
Επιλογές
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-offset=""
.
Ονομα | Τύπος | Προκαθορισμένο | Περιγραφή |
---|---|---|---|
αντισταθμίζεται | αριθμός | χορδή | λειτουργία | 0 | Μετατόπιση του αναπτυσσόμενου μενού σε σχέση με τον στόχο του. Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της μετατόπισης, καλείται με ένα αντικείμενο που περιέχει τα δεδομένα μετατόπισης ως πρώτο όρισμα. Η συνάρτηση πρέπει να επιστρέψει ένα αντικείμενο με την ίδια δομή. Ο κόμβος DOM του στοιχείου ενεργοποίησης μεταβιβάζεται ως δεύτερο όρισμα. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper . |
αναρρίπτω | boolean | αληθής | Να επιτρέπεται η αναστροφή του αναπτυσσόμενου μενού σε περίπτωση επικάλυψης στο στοιχείο αναφοράς. Για περισσότερες πληροφορίες, ανατρέξτε στα flip docs του Popper . |
Όριο | χορδή | στοιχείο | 'scrollParent' | Όριο περιορισμού υπερχείλισης του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του 'viewport' , 'window' , 'scrollParent' ή μιας αναφοράς HTMLElement (μόνο JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα του Popper preventOverflow . |
αναφορά | χορδή | στοιχείο | 'μεταβάλλω' | Στοιχείο αναφοράς του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του '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
) που περιέχει ένα αντικείμενο συμβάντος για το συμβάν κλικ.
Εκδήλωση | Περιγραφή |
---|---|
show.bs.dropdown |
Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης. |
shown.bs.dropdown |
Αυτό το συμβάν ενεργοποιείται όταν το αναπτυσσόμενο μενού έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
hide.bs.dropdown |
Αυτό το συμβάν ενεργοποιείται αμέσως όταν καλείται η μέθοδος εμφάνισης απόκρυψης. |
hidden.bs.dropdown |
Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του αναπτυσσόμενου μενού από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})