پنهان شدن submenu در بوت استرپ
Bootstrap dropdown sub-menu missing
چطور میتونم submenu تو dropdwon با بوت استرپ اضافه کنم؟ من می‌خوام منوی کشویی داشته باشم که زیرمنو ام داشته باشه، اما زیرمنوها به درستی نمایش داده نمیشن
سلام برای ایجاد منوی کشویی با ساب منو در بوت استرپ 5، میتونی از ساختار زیر استفاده کنی بوت استرپ 5 به طور پیش‌فرض از زیرمنوها پشتیبانی نمی‌کنه، اما با استفاده از HTML و CSS میتونی به راحتی این کار رو انجام بدی. اینجا نحوه اضافه کردن زیرمنو به منوی کشویی با استفاده از بوت استرپ 5 رو برات نوشتم
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown with Submenu</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
border-radius: .25rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">More options</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script>
document.querySelectorAll('.dropdown-submenu a').forEach((elem) => {
elem.addEventListener('click', (e) => {
e.preventDefault();
const submenu = elem.nextElementSibling;
submenu.classList.toggle('show');
});
});
</script>
</body>
</html>
اینجا یک دکمه کشویی ساخته شده که با کلیک روی اون، منوی کشویی باز میشه. تو این منو، یک زیرمنو اضافه شده که با استفاده از کلاس dropdown-submenu مشخص شده است.
تو CSS، برای زیرمنو، موقعیتش تنظیم شده تا درست کنار منوی اصلی نمایش داده بشه.
و تو JavaScript با کلیک بر روی آیتم‌های زیرمنو، نمایش آن‌ها تغییر می‌کنه
با این روش، منوی کشویی با زیرمنو به درستی عمل می‌کنه