Source

Αναπτυσσόμενα

Εναλλάξτε τις επικαλύψεις με βάση τα συμφραζόμενα για την εμφάνιση λιστών συνδέσμων και άλλων με την αναπτυσσόμενη προσθήκη 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>στοιχεία για να ταιριάζουν καλύτερα στις πιθανές ανάγκες σας.

Αναπτυσσόμενα μενού με ένα κουμπί

Οποιοδήποτε single .btnμπορεί να μετατραπεί σε αναπτυσσόμενο εναλλαγή με ορισμένες αλλαγές σήμανσης. Δείτε πώς μπορείτε να τα θέσετε σε λειτουργία με οποιοδήποτε από τα δύο <button>στοιχεία:

Action Another action Something else here 
<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>στοιχεία:

Action Another action Something else here 
<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>

Το καλύτερο μέρος είναι ότι μπορείτε να το κάνετε αυτό με οποιαδήποτε παραλλαγή κουμπιού, επίσης:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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που προστίθενται για τα κανονικά αναπτυσσόμενα κουμπιά. Αυτές οι πρόσθετες αλλαγές κρατούν το καρέ στο κέντρο στο κουμπί διαχωρισμού και παρέχουν μια περιοχή χτυπήματος πιο κατάλληλου μεγέθους δίπλα στο κύριο κουμπί.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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στο γονικό στοιχείο.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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στο γονικό στοιχείο.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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στο γονικό στοιχείο.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<!-- 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στο a .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>στοιχείου. Αυτό το ομολογουμένως άσχημο hack είναι απαραίτητο για να επιλύσετε μια ιδιορρυθμία στην αποστολή συμβάντων του 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 Μετατόπιση του αναπτυσσόμενου μενού σε σχέση με τον στόχο του. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper.js .
αναρρίπτω boolean αληθής Να επιτρέπεται η αναστροφή του αναπτυσσόμενου μενού σε περίπτωση επικάλυψης στο στοιχείο αναφοράς. Για περισσότερες πληροφορίες, ανατρέξτε στα flip docs του Popper.js .
Όριο χορδή | στοιχείο 'scrollParent' Όριο περιορισμού υπερχείλισης του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του '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…
})