Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Merhaba ben bir laravel projesi geliştiriyorum ve bir yerde takıldım.Siz bilen insanlara sormak istedim.

Ben dropdown menü açtığımda başka bir div classının z-index parametresini değiştirmek istiyorum.Dropdown kapandığında tekrar z-index eski haline gelsin istiyorum.

nav dropdown

<div class="nav-item dropdown">
                <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu" aria-expanded="false">
                                        <span class="avatar avatar-sm" style="background-image: url(http://localhost/storage/avatar/1654729156.png)"></span>
                                        <div class="d-none d-xl-block ps-2">
                        <div>x</div>
                        <div class="mt-1 small text-muted">xxx@g...</div>
                    </div>
                </a>
              
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <a href="http://localhost/profile/x" class="dropdown-item">Profil</a>
                    <a href="http://localhost/kaydedilenler" class="dropdown-item">Kaydedilenler</a>
                    <div class="dropdown-divider"></div>
                    <a href="http://localhost/hesap/düzenle" class="dropdown-item">Hesap</a>
                                                            <a href="http://localhost/logout" class="dropdown-item" onclick="event.preventDefault();
                                document.getElementById('logout-form').submit();">Çıkış Yap</a>
                    <form id="logout-form" action="http://localhost/logout" method="POST">
                        <input type="hidden" name="_token" value="kBUQFXTwUu3m13f">                    </form>
                </div>
            </div>

z-index değiştirmek istediğim navbar

<div class="navbar-expand-md sticky-top shadow">
    <div class="collapse navbar-collapse" id="navbar-menu">
        <div class="navbar navbar-dark">
            <div class="container-xl">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link strong" href="http://localhost">
                            <span class="nav-link-icon d-lg-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="4" y1="6" x2="13" y2="6"></line><line x1="4" y1="12" x2="11" y2="12"></line><line x1="4" y1="18" x2="11" y2="18"></line><polyline points="15 15 18 18 21 15"></polyline><line x1="18" y1="6" x2="18" y2="18"></line></svg>
                            </span>
                            <span class="nav-link-title">
                                En Son
                            </span>
                        </a>
                    </li>
                    
                    <li class="nav-item ">
                        <a class="nav-link strong" href="http://localhost/viral">
                            <span class="nav-link-icon d-lg-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="3" y1="12" x2="6" y2="12"></line><line x1="12" y1="3" x2="12" y2="6"></line><line x1="7.8" y1="7.8" x2="5.6" y2="5.6"></line><line x1="16.2" y1="7.8" x2="18.4" y2="5.6"></line><line x1="7.8" y1="16.2" x2="5.6" y2="18.4"></line><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>
                            </span>
                            <span class="nav-link-title">
                                Viral
                            </span>
                        </a>
                    </li>
                    
                    <li class="nav-item ">
                        <a class="nav-link strong" href="http://localhost/random">
                            <span class="nav-link-icon d-lg-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" style="" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6"></path><path d="M18 4l3 3l-3 3"></path><path d="M3 7h5l7 10h6"></path><path d="M18 20l3 -3l-3 -3"></path></svg>
                            </span>
                            <span class="nav-link-title">
                                Rastgele
                            </span>
                        </a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false">
                            <span class="nav-link-icon d-lg-inline-block">
                            <i class="fa-solid fa-hands-bound" style=""></i>
                            </span>
                            <span class="nav-link-title">
                            Kategoriler
                            </span>
                            
                        </a>
                        <div class="dropdown-menu">
                                                                                        <a class="dropdown-item" href="http://localhost/category/genel">
                                                Genel
                                            </a>
                                                                                    </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false">
                            <span class="nav-link-icon d-lg-inline-block">
	                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="9" cy="7" r="4"></circle><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path></svg>
                            </span>
                            <span class="nav-link-title">
                                Cinsiyet
                            </span>
                        </a>
                        <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="http://localhost/gender/1/erkek">
                                Erkek
                            </a>
                                                    </div>
                    </li>
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false">
                            <span class="nav-link-icon d-lg-inline-block">
                            <i class="fa-solid fa-file-lines" style=""></i>
                            </span>
                            <span class="nav-link-title">
                            Sayfalar
                            </span>
                            
                        </a>
                        <div class="dropdown-menu">
                                                                                        <a href="http://localhost/page/sartlar-ve-politikalar" class="dropdown-item text-truncate">
                                                sartlar ve Politikalar
                                            </a>
                                                                                        <a href="http://localhost/page/iletisim" class="dropdown-item text-truncate">
                                                iletisim
                                            </a>
                                                                                        <a href="http://localhost/page/hos-geldiniz" class="dropdown-item text-truncate">
                                                hoş geldiniz
                                            </a>
                                                                                    </div>
                    </li>
                </ul>
                <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                    <a href="#" class="btn btn-white btn-pill strong" data-bs-toggle="modal" data-bs-target="#modal--write--story">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="9"></circle><line x1="9" y1="12" x2="15" y2="12"></line><line x1="12" y1="9" x2="12" y2="15"></line></svg> Bir şeyler yaz
                    </a>
                </div>
            </div>
			
        </div>
        
    </div>

    
</div>

    mgsmus hocam size çok yazdım ama bakarsanız sevinirim

        takix merhaba
        Js biliyorsan click işlemi yaptığın drop için bir click methodu yapıcaksın açıksa değişiklik yapmak istediğin div için hazır class varsa açıkken şunu kapalıyken bunu diyeceksin veya css değeri vereceksin.

            mizraklar hide değerinden veya show değerinden de yararlanabilirsin mizraklar'ın söylediği gibi

              mgsmus
              hocam dropdown açıldığında ".sticky-top" class'ının z-index değerini -1 olarak ayalıyorum.Ancak kapatıldığında geri 1 olarak yapamadım şuan onu deniyorum.

              <script>
                $(document).ready(function() {

                    const myDropdown = document.getElementById('bbb')
                    myDropdown.addEventListener('show.bs.dropdown', event => {
                        const zIndex = document.querySelector("#bbb2");
                        zIndex.style.zIndex = "-1";
                    })

                    const myDropdown2 = document.getElementById('bbb')
                    myDropdown2.addEventListener('hidden.bs.dropdown', event => {
                        const zIndex = document.querySelector("#bbb2");
                        zIndex.style.zIndex = "1";
                    })
                });

            </script>```