Source

ڊراپ ڊائونز

بوٽ اسٽريپ ڊراپ ڊائون پلگ ان سان لنڪن جي لسٽن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز کي ٽوگل ڪريو.

اوسر

ڊراپ ڊائونز ٽوگليبل، ڳنڍين جي فهرستن ۽ وڌيڪ ڏيکارڻ لاءِ لاڳاپيل اوورليز آهن. اهي شامل ڪيل بوٽ اسٽريپ ڊراپ ڊائون جاوا اسڪرپٽ پلگ ان سان متعامل ڪيا ويا آهن. اهي ڪلڪ ڪرڻ سان ٽوگل ڪيا ويا آهن، نه هوور ڪرڻ سان؛ هي هڪ ارادي ڊيزائن جو فيصلو آهي.

ڊراپ ڊائونز هڪ ٽئين پارٽي لائبريري تي ٺاهيا ويا آهن، Popper.js ، جيڪا متحرڪ پوزيشن ۽ ڏيک پورٽ جي سڃاڻپ مهيا ڪري ٿي. Bootstrap جي JavaScript کان اڳ popper.min.js شامل ڪرڻ جي پڪ ڪريو يا استعمال ڪريو bootstrap.bundle.min.js/ bootstrap.bundle.jsجنهن ۾ Popper.js شامل آهي. Popper.js استعمال نه ڪيو ويو آهي ڊراپ ڊائونز کي نيوبارز ۾ پوزيشن ڪرڻ لاءِ جيتوڻيڪ متحرڪ پوزيشن جي ضرورت ناهي.

جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهيutil.js .

پهچ

WAI ARIA معيار هڪ حقيقي role="menu"ويجيٽ جي وضاحت ڪري ٿو ، پر اهو مخصوص آهي ايپليڪيشن-جهڙي مينيو لاءِ جيڪو عملن يا ڪمن کي متحرڪ ڪري ٿو. ARIA مينيو صرف مينيو شيون، چيڪ باڪس مينيو شيون، ريڊيو بٽڻ مينيو شيون، ريڊيو بٽڻ گروپ، ۽ ذيلي مينيو شامل ڪري سگھن ٿا.

بوٽ اسٽريپ جا ڊراپ ڊائونز، ٻئي طرف، عام طور تي ٺهيل آهن ۽ مختلف حالتن ۽ مارڪ اپ ساختن تي لاڳو ٿين ٿيون. مثال طور، اهو ممڪن آهي ڊراپ ڊائونز ٺاهڻ جنهن ۾ اضافي ان پٽ ۽ فارم ڪنٽرول شامل هجن، جهڙوڪ سرچ فيلڊز يا لاگ ان فارم. انهي سبب لاء، بوٽ اسٽريپ جي توقع نه آهي (نه ئي خودڪار طور تي شامل ڪريو) ڪنهن به role۽ خاصيتن جي حقيقي ARIA مينيو 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 سان معاملو ناهي. ھاڻي توھان اختياري طور تي <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-righta .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جي فوري ٻارن ۾ شامل ڪري ٿو. iOS جي ايونٽ ڊيليگيشن ۾ نرالا<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"اڃا به گهربل

ان کان سواءِ ته توهان پنهنجي ڊراپ ڊائون کي JavaScript ذريعي ڪال ڪريو يا ان جي بدران data-api استعمال ڪريو، data-toggle="dropdown"هميشه لاءِ ضروري آهي ته ڊراپ ڊائون جي ٽرگر عنصر تي موجود هجي.

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-offset="".

نالو قسم ڊفالٽ وصف
بند ڪرڻ نمبر | تار | فنڪشن 0 ان جي ھدف سان لاڳاپيل ڊراپ ڊائون جو آفسيٽ. وڌيڪ معلومات لاءِ ڏسو Popper.js جي آفسٽ ڊيڪس .
ڦٽڻ بولين سچو ريفرنس عنصر تي اوورليپنگ جي صورت ۾ ڊراپ ڊائون کي فلپ ڪرڻ جي اجازت ڏيو. وڌيڪ معلومات لاءِ ڏسو Popper.js جي فلپ ڊيڪس .
حد تار | عنصر 'اسڪرول والدين' ڊراپ ڊائون مينيو جي اوور فلو پابندي جي حد. 'viewport', , 'window', 'scrollParent', or an HTMLElement reference (صرف JavaScript) جا قدر قبول ڪري ٿو . وڌيڪ معلومات لاءِ ڏسو Popper.js's preventOverflow docs .
حوالو تار | عنصر 'ٽگل' ڊراپ ڊائون مينيو جو حوالو عنصر. 'toggle', 'parent', يا HTMLElement ريفرنس جي قدرن کي قبول ڪري ٿو . وڌيڪ معلومات لاءِ ڏسو Popper.js جي حوالي سان اعتراض جا دستاويز .
ڊسپلي تار 'متحرڪ' ڊفالٽ طور، اسان استعمال ڪندا آهيون 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 هي واقعو فائر ڪيو ويو آهي جڏهن ڊراپ ڊائون صارف کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء).
hide.bs.dropdown اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن لڪائڻ جو طريقو سڏيو ويندو آهي.
hidden.bs.dropdown هي واقعو فائر ڪيو ويندو آهي جڏهن ڊراپ ڊائون ختم ٿي چڪو آهي صارف کان لڪايو وڃي (سي ايس ايس جي منتقلي جو انتظار ڪندو، مڪمل ٿيڻ لاء).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})