• 1400/06/27

مشکل نگرفتن height ساب منو در toggle جاوا اسکریپت :

        <nav class="mobile-navbar">
            <div class="mobile-logo-container">
                <a href="#">
                    img
                </a>
            </div>

            <ul class="mobile-navigation-items">
                <li class="mobile-menu-title">فیلم خارجی</li>
                <ul class="mobile-menu-collapse">
                    <li class="mobile-link-item"><a href="#">اکشن</a></li>
                    <li class="mobile-link-item"><a href="#">تخیلی</a></li>
                    <li class="mobile-link-item"><a href="#">علمی</a></li>
                    <li class="mobile-link-item"><a href="#">کمدی</a></li>
                    <li class="mobile-link-item"><a href="#">هندی</a></li>
                    <li class="mobile-link-item"><a href="#">ترسناک</a></li>
                    <li class="mobile-link-item"><a href="#">درام</a></li>
                    <li class="mobile-link-item"><a href="#">تاریخی</a></li>
                    <li class="view-all-videos-mobile"><a href="#" class="view-all-videos "> همه فیلم های خارجی
                            <svg class="arrow-left-icon" xmlns="http://www.w3.org/2000/svg"
                                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
                                fill="#f9f9f9">
                                <rect fill="none" height="24" width="24" />
                                <path d="M9,19l1.41-1.41L5.83,13H22V11H5.83l4.59-4.59L9,5l-7,7L9,19z" />
                            </svg><i></i></a></li>
                </ul>
            </ul>

            <ul class="mobile-navigation-items">
                <li class="mobile-menu-title">فیلم خارجی</li>
                <ul class="mobile-menu-collapse">
                    <li class="mobile-link-item"><a href="#">اکشن</a></li>
                    <li class="mobile-link-item"><a href="#">تخیلی</a></li>
                    <li class="mobile-link-item"><a href="#">علمی</a></li>
                    <li class="mobile-link-item"><a href="#">کمدی</a></li>
                    <li class="mobile-link-item"><a href="#">هندی</a></li>
                    <li class="mobile-link-item"><a href="#">ترسناک</a></li>
                    <li class="mobile-link-item"><a href="#">درام</a></li>
                    <li class="mobile-link-item"><a href="#">تاریخی</a></li>
                    <li class="view-all-videos-mobile"><a href="#" class="view-all-videos "> همه فیلم های خارجی
                            <svg class="arrow-left-icon" xmlns="http://www.w3.org/2000/svg"
                                enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
                                fill="#f9f9f9">
                                <rect fill="none" height="24" width="24" />
                                <path d="M9,19l1.41-1.41L5.83,13H22V11H5.83l4.59-4.59L9,5l-7,7L9,19z" />
                            </svg><i></i></a></li>
                </ul>
            </ul>
        </nav>
.mobile-menu-collapse {
	max-height: 0;
   	overflow: hidden;
    	background: #15151a;

// Menu Actives Styles
.menu-active-item {
  color: $white-color;
}

.menu-active-item-icon::after {
  font-family: "Font Awesome 5 Free";
  content: "\f068" !important;
}

.menu-active-item-bg::before {
  transform: scaleX(1) !important;
}

.menu-item.show {
  min-height: 400px !important;
}
let MobileMenuItems = document.querySelectorAll('.mobile-menu-title');

function toggleMenuItems() {
    this.classList.toggle('menu-active-item');
    this.classList.toggle('menu-active-item-icon');
    this.classList.toggle('menu-active-item-bg');
    this.nextElementSibling.classList.toggle('menu-item.show');
    this.closest('.mobile-navbar').querySelectorAll('.menu-active-item , .menu-item.show').forEach(element => {
        if (element !== this && element !== this.nextElementSibling) {
            element.classList.remove('menu-active-item', 'menu-active-item-icon', 'menu-active-item-bg', 'menu-item.show');
        }
    });
}

MobileMenuItems.forEach(li => {
    li.addEventListener('click', toggleMenuItems);
});
logo-enamadlogo-samandehi