v2.5.2
Giriş yap

Dikey açılır menü

kargasa1982
756 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhabalar, frontend ile pek bir işim olmadığından belki çok basit olan bir şeyi inanın şuan kafam basmıyor. Aşağıdaki yapıda bir tasarımım olacak;

<ul>
    <li>Ders 1</li>
        <ul>
            <li>Ünite 1</li>
                <ul>
                    <li>Konu 1</li>
                        <ul>
                            <li>Kazanım 1</li>
                            <li>Kazanım 2</li>
                            <li>Kazanım 3</li>
                            <li>Kazanım 4</li>
                        </ul>
                    <li>Konu 2</li>
                    <li>Konu 3</li>
                </ul>
            <li>Ünite 2</li>
            <li>Ünite 3</li>
        </ul>
    <li>Ders 2</li>
    <li>Ders 3</li>
</ul>

Yukarıdaki gibi bir yapıda, ekran ilk geldiğinde tüm Dersler kapalı olacak ve tıkladığım ders altındaki ünite alanları açılacak, Üniteye tıklayınca altındaki konu başlıkları açılacak, konuya tıklayınca da o konu altındaki kazanımlar gelecek. <ul><li></li></ul> yapısında veya div yapısında olabilir hiç farketmez tek ihtiyacım olan bootsrap accordion yapısı gibi çalışması sadece tıkladığım alanın altında yer alan ilk bölüm açılsın istiyorum. Şimdiden teşekkürler.

Cevap yaz
Cevaplar (2)
tayfunerbilen
1290 gün önce

sadece css ile yapmak istersen;

<ul>
    <li tabindex="0">
        Ders 1
        <ul>
            <li tabindex="0">
                Ünite 1
                <ul>
                    <li tabindex="0">
                        Konu 1
                        <ul>
                            <li tabindex="0">Kazanım 1</li>
                            <li tabindex="0">Kazanım 2</li>
                            <li tabindex="0">Kazanım 3</li>
                            <li tabindex="0">Kazanım 4</li>
                        </ul>
                    </li>
                    <li tabindex="0">Konu 2</li>
                    <li tabindex="0">Konu 3</li>
                </ul>
            </li>
            <li tabindex="0">Ünite 2</li>
            <li tabindex="0">Ünite 3</li>
        </ul>
    </li>
    <li tabindex="0">Ders 2</li>
    <li tabindex="0">Ders 3</li>
</ul>
<style>
    li ul {
    	display: none;
    }
    li:focus-within > ul {
    	display: block;
    }
</style>
kargasa1982
1290 gün önce

Teşekkürler bu kadar hızlı cevap için @tayfunerbilen. Yine hayat kurtardın.