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

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

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

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


ثبت پرسش جدید
علی سعادت
تخصص : junior front-end developer
@Saadat 2 سال پیش آپدیت شد
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
@mahdi2000mh 2 سال پیش مطرح شد
0

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


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

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