راکت

بسته شدن dropdown در بوت استرپ

2 پاسخ

درود و وقت بخیر

وقتی روی dropdown میزنم اون باز میشه اما وقتی روی جای دیگه صفحه کلیک میکنم بسته میشه !!
من میخوام فقط وقتی روی خود dropdown زدم بسته بشه ؟؟
ممنون

ثبت پرسش جدید

پاسخ‌ها

2
علی سعادت
علی سعادت
@Saadat

تخصص: junior front-end developer

https://stackoverflow.com/questions/25089297/avoid-dropdown-menu-close-on-click-inside
شاید این لینک کمکت کنه
https://www.codegrepper.com/code-examples/javascript/close+bootstrap+dropdown+on+button+click
و این

و اصلا اینا با جاوااسکریپته
تو خود docs بوت استرپ این داستان اومده...

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

به این صورت میتونی با خود بوت استرپ این کارو انجام بدی

مهدی
مهدی
@mahdi2000mh

تخصص: laravel

این لینک اول رو قبلا تست کردم به نتیجه نرسیدم شاید بی دقتی یا عجله کردم
به هرحال ممنون
برسی مجدد میکنم

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام