መውረድ

የአገናኞች ዝርዝሮችን እና ሌሎችንም በBootstrap ተቆልቋይ ተሰኪ ለማሳየት አውድ ተደራቢዎችን ቀይር።

አጠቃላይ እይታ

ተቆልቋይዎች ሊቀያየሩ የሚችሉ፣ የአገናኞች ዝርዝሮችን ለማሳየት አውድ ተደራቢዎች እና ሌሎችም። ከተካተቱት የቡትስትራፕ ተቆልቋይ ጃቫ ስክሪፕት ተሰኪ ጋር መስተጋብራዊ እንዲሆኑ ተደርገዋል። እነሱ በማንዣበብ ሳይሆን ጠቅ በማድረግ ይቀየራሉ; ይህ ሆን ተብሎ የተደረገ የንድፍ ውሳኔ ነው.

ተቆልቋይዎች በሶስተኛ ወገን ቤተ-መጽሐፍት, Popper.js ላይ የተገነቡ ናቸው , ይህም ተለዋዋጭ አቀማመጥ እና የመመልከቻ ፍለጋን ያቀርባል. ከ Bootstrap ጃቫ ስክሪፕት በፊት popper.min.js ን ማካተትዎን ያረጋግጡ bootstrap.bundle.min.jsወይም bootstrap.bundle.jsፖፐር.js የያዘውን ይጠቀሙ። ምንም እንኳን ተለዋዋጭ አቀማመጥ የማያስፈልግ በመሆኑ Popper.js ተቆልቋይ ቦታዎችን በ navbars ውስጥ ለማስቀመጥ አያገለግልም።

የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js ።

ተደራሽነት

የ WAI ARIA ስታንዳርድ ትክክለኛ role="menu"መግብርን ይገልፃል ፣ ነገር ግን ይህ ተግባርን ወይም ተግባርን ለሚቀሰቅሱ እንደ መተግበሪያ ላሉ ምናሌዎች የተወሰነ ነው። የ ARIA ሜኑዎች የምናሌ ንጥሎችን፣ የአመልካች ሳጥን ሜኑ ንጥሎችን፣ የሬዲዮ አዝራሮችን የምናሌ ንጥሎችን፣ የሬዲዮ አዝራር ቡድኖችን እና ንዑስ-ምናሌዎችን ብቻ ነው መያዝ የሚችሉት።

በሌላ በኩል የቡትስትራፕ ተቆልቋይ ቦታዎች ሁሉን አቀፍ እና ለተለያዩ ሁኔታዎች እና የማርክ መስጫ መዋቅሮች ተፈጻሚ እንዲሆኑ የተነደፉ ናቸው። ለምሳሌ፣ ተጨማሪ ግብዓቶችን የያዙ ተቆልቋይዎችን መፍጠር እና እንደ የፍለጋ መስኮች ወይም የመግቢያ ቅጾች ያሉ የቅጽ መቆጣጠሪያዎችን መፍጠር ይቻላል። በዚህ ምክንያት, Bootstrap ለእውነተኛ 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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

በነባሪ፣ ተቆልቋይ ሜኑ በቀጥታ 100% ከላይ እና በወላጁ በግራ በኩል ይቀመጣል። የተቆልቋይ ምናሌውን .dropdown-menu-rightወደ .dropdown-menuቀኝ አሰላለፍ።

ቀና በል! ለፖpper.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 በ navbars ውስጥ ስለማይጠቀም በ navbars ውስጥ በተቆልቋይ አዝራሮች ላይ ባህሪ ማከል እንደማያስፈልግዎ ልብ ይበሉ ።

ራስጌዎች

በማንኛውም ተቆልቋይ ሜኑ ውስጥ ያሉትን የእርምጃዎች ክፍሎች ለመሰየም ርዕስ ያክሉ።

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

አጠቃቀም

በመረጃ ባህሪያት ወይም ጃቫስክሪፕት በኩል ተቆልቋይ ተሰኪው የተደበቀ ይዘትን (የተቆልቋይ ምናሌዎችን) .showበወላጅ ዝርዝር ንጥል ላይ ያለውን ክፍል በመቀያየር ይቀየራል። ባህሪው data-toggle="dropdown"በመተግበሪያ ደረጃ ተቆልቋይ ምናሌዎችን ለመዝጋት የታመነ ነው፣ ስለዚህ ሁልጊዜ እሱን መጠቀም ጥሩ ነው።

በንክኪ የነቁ መሣሪያዎች ላይ፣ ተቆልቋይ መክፈት ባዶ ( $.noop) mouseoverተቆጣጣሪዎችን ለኤለመንቱ የቅርብ ልጆች ይጨምራል <body>። ይህ ተቀባይነት ያለው አስቀያሚ ጠለፋ በ 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>

በጃቫስክሪፕት በኩል

ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-

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

`data-toggle="dropdown"`አሁንም ያስፈልጋል

ተቆልቋይዎን በጃቫ ስክሪፕት ቢደውሉም ሆነ በምትኩ ዳታ-ኤፒውን ቢጠቀሙ data-toggle="dropdown"ሁል ጊዜ በተቆልቋዩ ቀስቅሴ ክፍል ላይ መገኘት አለባቸው።

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""።

ስም	ዓይነት	ነባሪ	መግለጫ
ማካካሻ	ቁጥር \| ሕብረቁምፊ \| ተግባር	0	ከዒላማው አንጻር የተቆልቋዩ ማካካሻ። አንድ ተግባር ማካካሻውን ለመወሰን ጥቅም ላይ ሲውል የማካካሻ ውሂቡን ከያዘው ዕቃ ጋር እንደ መጀመሪያው መከራከሪያ ይባላል። ተግባሩ አንድ አይነት መዋቅር ያለው ነገር መመለስ አለበት. ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ነጋሪ እሴት ተላልፏል። ለበለጠ መረጃ የPopper.js ማካካሻ ሰነዶችን ይመልከቱ ።
መገልበጥ	ቡሊያን	እውነት ነው።	በማጣቀሻው አካል ላይ ተደራራቢ ከሆነ ተቆልቋይ እንዲገለበጥ ፍቀድ። ለበለጠ መረጃ የPopper.js's Flip Docs ይመልከቱ ።
ወሰን	ሕብረቁምፊ \| ኤለመንት	'ማሸብለል ወላጅ'	የተቆልቋይ ምናሌው የትርፍ ፍሰት ገደብ ወሰን። `'viewport'`የ , `'window'`, `'scrollParent'`, ወይም HTMLElement ማጣቀሻ (ጃቫስክሪፕት ብቻ) እሴቶችን ይቀበላል . ለበለጠ መረጃ የPopper.jsን ከመጠን ያለፈ ፍሰትን ይመልከቱ ።
ማጣቀሻ	ሕብረቁምፊ \| ኤለመንት	'ቀያይር'	የተቆልቋይ ምናሌ ማጣቀሻ አካል። `'toggle'`የ , `'parent'`, ወይም HTMLElement ማጣቀሻ እሴቶችን ይቀበላል ። ለበለጠ መረጃ የPopper.js's referenceObject docs ይመልከቱ ።
ማሳያ	ሕብረቁምፊ	'ተለዋዋጭ'	በነባሪ፣ ለተለዋዋጭ አቀማመጥ Popper.js እንጠቀማለን። ይህን በ `static`.
popperConfig	ባዶ \| ነገር	ባዶ	የBootstrapን ነባሪ የPopper.js ውቅር ለመቀየር የ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...
})

መውረድ

አጠቃላይ እይታ

ተደራሽነት

ምሳሌዎች

ነጠላ አዝራር

የተከፈለ አዝራር

መጠናቸው

አቅጣጫዎች

መጣል

ተቆልቋይ

መውደቅ

የምናሌ ዕቃዎች

ንቁ

ተሰናክሏል።

የምናሌ አሰላለፍ

ምላሽ ሰጪ አሰላለፍ

የምናሌ ይዘት

ራስጌዎች

አከፋፋዮች

ጽሑፍ

ቅጾች

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

`data-toggle="dropdown"`አሁንም ያስፈልጋል

አማራጮች

ዘዴዎች

ክስተቶች

መውረድ

አጠቃላይ እይታ

ተደራሽነት

ምሳሌዎች

ነጠላ አዝራር

የተከፈለ አዝራር

መጠናቸው

አቅጣጫዎች

መጣል

ተቆልቋይ

መውደቅ

የምናሌ ዕቃዎች

ንቁ

ተሰናክሏል።

የምናሌ አሰላለፍ

ምላሽ ሰጪ አሰላለፍ

የምናሌ ይዘት

ራስጌዎች

ተቆልቋይ ራስጌ

አከፋፋዮች

ጽሑፍ

ቅጾች

የማውረድ አማራጮች

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

data-toggle="dropdown"አሁንም ያስፈልጋል

አማራጮች

ዘዴዎች

ክስተቶች

`data-toggle="dropdown"`አሁንም ያስፈልጋል