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>στοιχεία:

<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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

Ευθυγράμμιση με απόκριση

Εάν θέλετε να χρησιμοποιήσετε αποκριτική στοίχιση, απενεργοποιήστε τη δυναμική τοποθέτηση προσθέτοντας το 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>στοιχείου. Αυτό το ομολογουμένως άσχημο 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	Μετατόπιση του αναπτυσσόμενου μενού σε σχέση με τον στόχο του. Όταν μια συνάρτηση χρησιμοποιείται για τον προσδιορισμό της μετατόπισης, καλείται με ένα αντικείμενο που περιέχει τα δεδομένα μετατόπισης ως πρώτο όρισμα. Η συνάρτηση πρέπει να επιστρέψει ένα αντικείμενο με την ίδια δομή. Ο κόμβος DOM του στοιχείου ενεργοποίησης μεταβιβάζεται ως δεύτερο όρισμα. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα μετατόπισης του Popper.js .
αναρρίπτω	boolean	αληθής	Να επιτρέπεται η αναστροφή του αναπτυσσόμενου μενού σε περίπτωση επικάλυψης στο στοιχείο αναφοράς. Για περισσότερες πληροφορίες, ανατρέξτε στα flip docs του Popper.js .
Όριο	χορδή \| στοιχείο	'scrollParent'	Όριο περιορισμού υπερχείλισης του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του `'viewport'`, `'window'`, `'scrollParent'`ή μιας αναφοράς HTMLElement (μόνο JavaScript). Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα preventOverflow του Popper.js .
αναφορά	χορδή \| στοιχείο	'μεταβάλλω'	Στοιχείο αναφοράς του αναπτυσσόμενου μενού. Αποδέχεται τις τιμές του `'toggle'`, `'parent'`ή μιας αναφοράς HTMLElement. Για περισσότερες πληροφορίες, ανατρέξτε στα έγγραφα referenceObject του 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γονικό στοιχείο και έχουν μια 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...
})

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

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Κατευθύνσεις

Dropup

Dropright

Dropleft

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Περιεχόμενο μενού

Κεφαλίδες

Διαβήτης

Κείμενο

Έντυπα

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

`data-toggle="dropdown"`απαιτείται ακόμη

Επιλογές

Μέθοδοι

Εκδηλώσεις

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

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προσιτότητα

Παραδείγματα

Μονό κουμπί

Κουμπί διαίρεσης

Κόλλα

Κατευθύνσεις

Dropup

Dropright

Dropleft

Στοιχεία μενού

Ενεργός

άτομα με ειδικές ανάγκες

Στοίχιση μενού

Ευθυγράμμιση με απόκριση

Περιεχόμενο μενού

Κεφαλίδες

Αναπτυσσόμενη κεφαλίδα

Διαβήτης

Κείμενο

Έντυπα

Αναπτυσσόμενες επιλογές

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μέσω JavaScript

data-toggle="dropdown"απαιτείται ακόμη

Επιλογές

Μέθοδοι

Εκδηλώσεις

`data-toggle="dropdown"`απαιτείται ακόμη