راکت
مهدی
مهدی
4 سال پیش توسط مهدی مطرح شد
2 پاسخ

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

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

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


ثبت پرسش جدید
علی سعادت
علی سعادت
تخصص :junior front-end developer
@Saadat4 سال پیشمطرح شد
0

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>

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


مهدی
مهدی
تخصص :laravel
@mahdi2000mh4 سال پیشمطرح شد
0

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


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

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