Whakataka

Takahurihia nga whakakikorua horopaki mo te whakaatu i nga rarangi hononga me te maha atu me te mono takaiho Bootstrap.

Tirohanga

Ka takahurihia nga whakahekenga, he whakakikorua horopaki mo te whakaatu i nga rarangi hononga me etahi atu. He mea tauwhitiwhiti me te whakauru Bootstrap takaiho mono JavaScript. Ka takahurihia ma te panui, kaua ma te whakaparo; he whakatau hoahoa tenei.

Ka hangaia nga whakahekenga ki runga i te whare pukapuka tuatoru, Popper.js , e whakarato ana i te tuunga hihiri me te tirohanga tirohanga. Kia mahara ki te whakauru i te popper.min.js i mua i te JavaScript a Bootstrap me te whakamahi bootstrap.bundle.min.js/ bootstrap.bundle.jskei roto Popper.js. Kare a Popper.js e whakamahia ana ki te tuu i nga takaiho i roto i nga pae whakatere ahakoa kaore e hiahiatia te tuunga hihiri.

Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .

Te urunga

Ko te paerewa WAI ARIA role="menu" e tautuhi ana i tetahi widget tuuturu , engari he mea motuhake tenei ki nga tahua-a-tono e whakaohooho ana i nga mahi, i nga mahi ranei. Ka taea anake e nga tahua ARIA nga taonga tahua, nga taonga tahua pouakataki, nga taonga tahua patene reo irirangi, nga roopu paatene reo irirangi, me nga tahua-iti.

Ko nga whakahekenga a Bootstrap, i tetahi atu taha, he mea hoahoa kia whanui me te whai waahi ki nga momo ahuatanga me nga hanganga tohu. Hei tauira, ka taea te hanga i nga takaiho kei roto etahi atu whakaurunga me nga mana puka, penei i nga mara rapu me nga puka takiuru. Mo konei, kaore a Bootstrap e tatari (kaore ano e taapiri aunoa) tetahi o nga roleme nga aria-huanga e hiahiatia ana mo nga tahua ARIA pono. Me whakauru e nga kaituhi enei huanga ake ake.

Heoi, ka taapirihia e Bootstrap te tautoko i hangaia mo te nuinga o nga taunekeneke tahua papapātuhi paerewa, penei i te kaha ki te neke i roto i nga .dropdown-itemhuānga takitahi ma te whakamahi i nga kii pehu me te kati i te tahua me te ESCki.

Tauira

Takaia te takahuri o te takaiho (to patene, hono ranei) me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Ka taea te whakaheke mai i nga huānga <a>ranei <button>kia pai ake ai to hiahia.

Patene takaiho kotahi

Ka .btntaea te huri ki te takahuri takahuri me etahi huringa tohu. Anei me pehea e taea ai e koe te mahi me nga <button>huānga e rua:

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

Me nga <a>huānga:

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

Ko te waahanga pai rawa atu ka taea e koe te mahi i tenei me nga momo paatene, ano:

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

Wehehia nga paatene takaiho

Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga paatene kotahi, engari me te .dropdown-toggle-splittaapiri mo te mokowā tika huri noa i te kaata takaiho.

Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae paddingi ia taha o te kareti ma te 25% me te tango margin-lefti te taapiri mo te whakaheke i nga paatene. Ko enei huringa taapiri ka noho tonu te tiaki ki roto i te paatene wehe me te whakarato i tetahi waahanga pai ake i te taha o te paatene matua.

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

Te rahinga

Ka mahi nga patene takaiho me nga paatene o nga rahi katoa, tae atu ki nga paatene takaiho taunoa me te wehea.

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

Rerekētanga whakaheke

Keu i nga tahua takaiho ki runga ake ma te taapiri atu .dropupki te huānga matua.

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

Te rerekētanga takataka

Keu i nga tahua takaiho kei te taha matau o nga huānga ma te taapiri atu .droprightki te huānga matua.

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

Rerekētanga mauī

Keu i nga tahua takaiho kei te taha maui o nga huānga ma te taapiri atu .dropleftki te huānga matua.

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

I nga wa o mua ko nga ihirangi tahua takaiho me hono, engari kua kore e pera me te v4. Inaianei ka taea e koe te whakamahi i <button>nga huānga i roto i o takaiho hei utu <a>s noa.

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

Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Tāpirihia .dropdown-menu-rightki te .dropdown-menutaha matau tiaarohia te tahua takaiho.

Mahunga ake! Whakatakotohia te tuunga he mihi ki a Popper.js (haunga ina kei roto i te pae whakatere).

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

Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.

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

Whakawehea nga roopu o nga mea tahua e pa ana ki te wehewehe.

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

Hoatu he puka ki roto i te tahua takaiho, waiho ranei ki roto i te tahua takaiho, ka whakamahi i te tawhē, i nga taputapu padding ranei hei hoatu i te waahi kino e hiahia ana koe.

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

Tāpirihia .activeki ngā tūemi kei te takaiho hei kāhua hei hohe .

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

Tāpirihia .disabledki ngā tūemi kei roto i te takaiho hei kāhua hei monokia .

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

Whakamahinga

Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takaiho nga ihirangi huna (nga tahua takaiho) ma te takahuri i te .showkaraehe ki te rarangi matua. Ka whakawhirinakihia te data-toggle="dropdown"huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.

I runga i nga taputapu pa-whakahohe, te whakatuwhera i te takaiho ka taapirihia nga kaikawe ( $.noop) putua mouseoverki nga tamariki tonu o te <body>huānga. Ko tenei hack tino kino he mea tika ki te mahi i tetahi quirk i roto i te roopu huihuinga a iOS , ka kore e taea te paopao ki tetahi wahi i waho o te maturuturunga iho mai i te whakaoho i te waehere ka kati i te takaiho. Ina katia te takaiho, ka mouseovertangohia enei kaihautu putunga.

Ma nga huanga raraunga

Tāpirihia data-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.

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

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

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

`data-toggle="dropdown"`hiahiatia tonu

Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-toggle="dropdown"me noho tonu koe ki te huānga whakaoho o te takaiho.

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".

Ingoa	Momo	Taunoa	Whakaahuatanga
whakatiki	tau \| aho \| mahi	0	Wehewehenga o te takaiho e pa ana ki tana whaainga. Mo etahi atu korero tirohia nga tuhinga a Popper.js .
takahuri	boolean	pono	Whakaaetia te Whakataka ki te huri i te mea kei te inaki te huānga tohutoro. Mo etahi atu korero tirohia nga tuhinga whakawhiti a Popper.js .
rohe	aho \| huānga	'scrollParent'	Te rohe herenga waipuke o te tahua takaiho. Ka whakaae ki nga uara o `'viewport'`, `'window'`, `'scrollParent'`, he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper.js preventOverflow .

Kia mahara ki te wa boundaryka tautuhia ki tetahi uara atu i 'scrollParent'te , ka tukuna te ahua position: staticki te .dropdownipu.

Nga tikanga

Tikanga	Whakaahuatanga
`$().dropdown('toggle')`	Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
`$().dropdown('update')`	He whakahōu i te tūnga o te takaiho o te huānga.
`$().dropdown('dispose')`	Ka whakakore i te takaiho o tetahi huānga.

Nga Takahanga

Ko nga takahanga taka-iho katoa ka panaia ki te .dropdown-menuhuānga matua o te me te whai relatedTargetrawa, ko tona uara ko te huānga punga takahuri.

Takahanga	Whakaahuatanga
`show.bs.dropdown`	Ka pupuhi tonu tenei takahanga ina ka karangahia te aratuka tauira whakaatu.
`shown.bs.dropdown`	Ka pupuhihia tenei takahanga i te wa kua kitea te takaiho ki te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).
`hide.bs.dropdown`	Ka puhia tonutia tenei takahanga ina kua karangahia te aratuka huna.
`hidden.bs.dropdown`	Ka pupuhihia tenei kaupapa ka mutu te hunanga o te takaiho mai i te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).

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

Whakataka

Tirohanga

Te urunga

Tauira

Patene takaiho kotahi

Wehehia nga paatene takaiho

Te rahinga

Rerekētanga whakaheke

Te rerekētanga takataka

Rerekētanga mauī

Tuemi tahua

Tirohanga tahua

Pane tahua

Nga wehewehe tahua

Puka tahua

Tūemi tahua hohe

Kua monoa nga mea tahua

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

`data-toggle="dropdown"`hiahiatia tonu

Kōwhiringa

Nga tikanga

Nga Takahanga

Whakataka

Tirohanga

Te urunga

Tauira

Patene takaiho kotahi

Wehehia nga paatene takaiho

Te rahinga

Rerekētanga whakaheke

Te rerekētanga takataka

Rerekētanga mauī

Tuemi tahua

Tirohanga tahua

Pane tahua

Pane takaiho

Nga wehewehe tahua

Puka tahua

Tūemi tahua hohe

Kua monoa nga mea tahua

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

data-toggle="dropdown"hiahiatia tonu

Kōwhiringa

Nga tikanga

Nga Takahanga

`data-toggle="dropdown"`hiahiatia tonu