Source

డ్రాప్‌డౌన్‌లు

బూట్‌స్ట్రాప్ డ్రాప్‌డౌన్ ప్లగిన్‌తో లింక్‌ల జాబితాలు మరియు మరిన్నింటిని ప్రదర్శించడం కోసం సందర్భోచిత ఓవర్‌లేలను టోగుల్ చేయండి.

అవలోకనం

డ్రాప్‌డౌన్‌లు టోగుల్ చేయదగినవి, లింక్‌ల జాబితాలు మరియు మరిన్నింటిని ప్రదర్శించడానికి సందర్భోచిత ఓవర్‌లేలు. చేర్చబడిన బూట్‌స్ట్రాప్ డ్రాప్‌డౌన్ జావాస్క్రిప్ట్ ప్లగ్ఇన్‌తో అవి ఇంటరాక్టివ్‌గా తయారయ్యాయి. అవి హోవర్ చేయడం ద్వారా కాకుండా క్లిక్ చేయడం ద్వారా టోగుల్ చేయబడతాయి; ఇది ఉద్దేశపూర్వక రూపకల్పన నిర్ణయం.

డ్రాప్‌డౌన్‌లు డైనమిక్ పొజిషనింగ్ మరియు వ్యూపోర్ట్ డిటెక్షన్‌ను అందించే మూడవ పార్టీ లైబ్రరీ, Popper.js లో నిర్మించబడ్డాయి. బూట్‌స్ట్రాప్ యొక్క జావాస్క్రిప్ట్‌కు ముందు popper.min.js ని చేర్చాలని నిర్ధారించుకోండి లేదా Popper.jsని కలిగి ఉన్న bootstrap.bundle.min.js/ ని ఉపయోగించండి bootstrap.bundle.js. డైనమిక్ పొజిషనింగ్ అవసరం లేనప్పటికీ నావ్‌బార్‌లలో డ్రాప్‌డౌన్‌లను ఉంచడానికి Popper.js ఉపయోగించబడదు.

మీరు మూలం నుండి మా జావాస్క్రిప్ట్‌ని రూపొందిస్తున్నట్లయితే, దీనికి అవసరంutil.js .

సౌలభ్యాన్ని

WAI ARIA ప్రమాణం వాస్తవ role="menu"విడ్జెట్‌ను నిర్వచిస్తుంది, అయితే ఇది చర్యలు లేదా ఫంక్షన్‌లను ప్రేరేపించే అప్లికేషన్-వంటి మెనులకు ప్రత్యేకమైనది. ARIA మెనుల్లో మెను ఐటెమ్‌లు, చెక్‌బాక్స్ మెను ఐటెమ్‌లు, రేడియో బటన్ మెను ఐటెమ్‌లు, రేడియో బటన్ గ్రూప్‌లు మరియు సబ్ మెనూలు మాత్రమే ఉంటాయి.

మరోవైపు, బూట్‌స్ట్రాప్ యొక్క డ్రాప్‌డౌన్‌లు సాధారణమైనవి మరియు విభిన్న పరిస్థితులకు మరియు మార్కప్ నిర్మాణాలకు వర్తించేలా రూపొందించబడ్డాయి. ఉదాహరణకు, శోధన ఫీల్డ్‌లు లేదా లాగిన్ ఫారమ్‌ల వంటి అదనపు ఇన్‌పుట్‌లు మరియు ఫారమ్ నియంత్రణలను కలిగి ఉన్న డ్రాప్‌డౌన్‌లను సృష్టించడం సాధ్యమవుతుంది. ఈ కారణంగా, బూట్‌స్ట్రాప్ నిజమైన ARIA మెనుల కోసం అవసరమైన ఏవైనా roleమరియు లక్షణాలను ఆశించదు (లేదా స్వయంచాలకంగా జోడించదు) . రచయితలు ఈ మరింత నిర్దిష్ట లక్షణాలను స్వయంగా చేర్చవలసి ఉంటుంది.aria-

అయినప్పటికీ, బూట్‌స్ట్రాప్ చాలా ప్రామాణిక కీబోర్డ్ మెను పరస్పర చర్యలకు అంతర్నిర్మిత మద్దతును జోడిస్తుంది, .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పేరెంట్ ఎలిమెంట్‌కు జోడించడం ద్వారా ఎలిమెంట్స్ పైన డ్రాప్‌డౌన్ మెనులను ట్రిగ్గర్ చేయండి.

<!-- 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పేరెంట్ ఎలిమెంట్‌కు జోడించడం ద్వారా మూలకాల కుడివైపు డ్రాప్‌డౌన్ మెనులను ట్రిగ్గర్ చేయండి .

<!-- 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పేరెంట్ ఎలిమెంట్‌కు జోడించడం ద్వారా ఎలిమెంట్‌ల ఎడమవైపు డ్రాప్‌డౌన్ మెనులను ట్రిగ్గర్ చేయండి .

<!-- 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 విషయంలో ఉండదు. ఇప్పుడు మీరు కేవలం s <button>కి బదులుగా మీ డ్రాప్‌డౌన్‌లలోని ఎలిమెంట్‌లను ఐచ్ఛికంగా ఉపయోగించవచ్చు .<a>

<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చేయడానికి 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 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>

వాడుక

.showడేటా అట్రిబ్యూట్‌లు లేదా జావాస్క్రిప్ట్ ద్వారా , మాతృ జాబితా అంశంలోని తరగతిని టోగుల్ చేయడం ద్వారా డ్రాప్‌డౌన్ ప్లగ్ఇన్ దాచిన కంటెంట్‌ను (డ్రాప్‌డౌన్ మెనులు) టోగుల్ చేస్తుంది . అప్లికేషన్ స్థాయిలో డ్రాప్‌డౌన్ మెనులను మూసివేయడం కోసం లక్షణం ఆధారపడి ఉంటుంది, కాబట్టి data-toggle="dropdown"దీన్ని ఎల్లప్పుడూ ఉపయోగించడం మంచిది.

టచ్-ఎనేబుల్ చేయబడిన పరికరాలలో, డ్రాప్‌డౌన్‌ను తెరవడం వలన ఎలిమెంట్ యొక్క తక్షణ పిల్లలకు ఖాళీ ( $.noop) హ్యాండ్లర్‌లు జోడించబడతాయి. ఐఓఎస్ ఈవెంట్ డెలిగేషన్‌లోని చమత్కారానికి సంబంధించి పని చేయడానికి ఈ అగ్లీ హ్యాక్ అవసరం , ఇది డ్రాప్‌డౌన్ వెలుపల ఎక్కడైనా ట్యాప్ చేస్తే డ్రాప్‌డౌన్‌ను మూసివేసే కోడ్‌ను ట్రిగ్గర్ చేయకుండా నిరోధించవచ్చు. డ్రాప్‌డౌన్ మూసివేయబడిన తర్వాత, ఈ అదనపు ఖాళీ హ్యాండ్లర్లు తీసివేయబడతాయి.mouseover<body>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>

జావాస్క్రిప్ట్ ద్వారా

జావాస్క్రిప్ట్ ద్వారా డ్రాప్‌డౌన్‌లను కాల్ చేయండి:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"ఇప్పటికీ అవసరం

మీరు జావాస్క్రిప్ట్ ద్వారా మీ డ్రాప్‌డౌన్‌కి కాల్ చేసినా లేదా బదులుగా డేటా-ఎపిని ఉపయోగించాలా అనే దానితో సంబంధం లేకుండా, data-toggle="dropdown"డ్రాప్‌డౌన్ ట్రిగ్గర్ ఎలిమెంట్‌లో ఎల్లప్పుడూ ఉండటం అవసరం.

ఎంపికలు

ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్‌ల కోసం, ఎంపిక పేరును data-, లో వలె జత చేయండి data-offset="".

పేరు టైప్ చేయండి డిఫాల్ట్ వివరణ
ఆఫ్సెట్ సంఖ్య | స్ట్రింగ్ | ఫంక్షన్ 0 దాని లక్ష్యానికి సంబంధించి డ్రాప్‌డౌన్ ఆఫ్‌సెట్. మరింత సమాచారం కోసం Popper.js ఆఫ్‌సెట్ డాక్స్‌ని చూడండి .
కుదుపు బూలియన్ నిజం సూచన మూలకంపై అతివ్యాప్తి చెందితే డ్రాప్‌డౌన్‌ను ఫ్లిప్ చేయడానికి అనుమతించండి. మరింత సమాచారం కోసం Popper.js యొక్క ఫ్లిప్ డాక్స్ చూడండి .
సరిహద్దు స్ట్రింగ్ | మూలకం 'స్క్రోల్ పేరెంట్' డ్రాప్‌డౌన్ మెను యొక్క ఓవర్‌ఫ్లో పరిమితి సరిహద్దు. 'viewport', 'window', 'scrollParent', లేదా HTMLElement సూచన (జావాస్క్రిప్ట్ మాత్రమే) విలువలను అంగీకరిస్తుంది . మరింత సమాచారం కోసం Popper.js's preventOverflow డాక్స్‌ని చూడండి .
సూచన స్ట్రింగ్ | మూలకం 'టోగుల్' డ్రాప్‌డౌన్ మెను యొక్క సూచన మూలకం. 'toggle', 'parent'లేదా HTMLElement సూచన యొక్క విలువలను అంగీకరిస్తుంది . మరింత సమాచారం కోసం Popper.js యొక్క referenceObject డాక్స్‌ని చూడండి .
ప్రదర్శన స్ట్రింగ్ 'డైనమిక్' డిఫాల్ట్‌గా, మేము డైనమిక్ పొజిషనింగ్ కోసం 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

ఈవెంట్ వివరణ
show.bs.dropdown షో ఇన్‌స్టాన్స్ మెథడ్‌ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది.
shown.bs.dropdown డ్రాప్‌డౌన్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (పూర్తి చేయడానికి CSS పరివర్తనాల కోసం వేచి ఉంటుంది).
hide.bs.dropdown దాచు ఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది.
hidden.bs.dropdown డ్రాప్‌డౌన్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})