Javascript ile dikey açılır menü yapma

Jack Daniel · 31 May 2018

Merhaba, kendi blog scriptimi yapmakla uğraşıyorum ve wordpress'teki sol menüye benzer bir menü tasarımım var. Menüdeki yazılara tıklayınca bütün yazılar, yeni yazı gibi alt menü açılması gerek ama hiçbir etkileşim olmuyor fakat ikinci basışımda açılıyor.
Sanırım ilk bastığımda menünün css te display kodunu alıyor ve ikinci basışımda açık mı değil mi kontrolü yapıp kapalıysa açıyor. Bunu ilk tıklayınca yapmayı başaramadım yardımcı olur musunuz.

HTML Kodu

Kod:

<li><button><i class="far fa-edit fa-lg"></i><span style="margin-left:3px;" onclick="showSubmenu()">Yazılar</span></button></li>
	<ul class="submenu">
		<li><a href="yazilar.php"><i class="far fa-edit fa-lg"></i><span style="margin-left:3px;">Yazılar</a></li>
	</ul>

JavaScript Kodu

Kod:

<script type="text/javascript">
function showSubmenu() {
	subdisplay = docüment.getElementsByClassName("submenu")[0].style.display;
		if(subdisplay == "none") {
			docüment.getElementsByClassName("submenu")[0].style.display = "block";	
		}
		else {
			docüment.getElementsByClassName("submenu")[0].style.display = "none";
			}
}
</script>

monster56 · 31 May 2018

Hocam yazilar php yi alabilirmiyim ? Bende kendi sitemi kodluyorum hoş durabilir

Jack Daniel · 31 May 2018

malesef şu an sadece html var onu düzenlemekle uğraşıyorum.

abom · 31 May 2018

Öncelikle şunu bir dener misin?

docüment.get kodlarını ü leri u yap olarak değiştirir misin?

Olmadı;
<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu") .style.display=="none") {do-cument.getElementByClassName("submenu").style.display="block"} else {do-cument.getElementByClassName("submenu").style.display="none"}
}
</script>

do-cument arasındaki - yi kaldır.

Jack Daniel · 31 May 2018

abom' Alıntı:
Öncelikle şunu bir dener misin?

docüment.get kodlarını ü leri u yap olarak değiştirir misin?

Olmadı;
<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu") .style.display=="none") {do-cument.getElementByClassName("submenu").style.display="block"} else {do-cument.getElementByClassName("submenu").style.display="none"}
}
</script>

do-cument arasındaki - yi kaldır.

Forumda ＤＯＣＵＭＥＮＴ yazamıyormuşuz ondan ü yazdım belirtmeyi unutmuşum kusura bakmayın.
Verdiğiniz kodu denedim ama bu sefer hiç çalışmadı. Bildiğim kadarıyla getElementsByClassName[] olarak kullanılır çünkü classlar birden fazla yerde kullanıldığı için dizi halinde geliyor.

Kod:

<script type="text/javascript">
	function showSubmenu() {
		if(********.getElementsByClassName("submenu")[0].style.display == "none") {
			********.getElementsByClassName("submenu")[0].style.display = "block";
		}
		else {
			********.getElementsByClassName("submenu")[0].style.display = "none";
		}
	}
</script>

Bu şekilde kullanınca da olmuyor. yani değişkene atamadan.

abom · 31 May 2018

o zaman şu şekilde dene;

<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu")[0] .style.display=="none") {
do-cument.getElementByClassName("submenu")[0].style.disp lay="block"} else {
do-cument.getElementByClassName("submenu")[0].style.disp lay="none"}
}
</script>

dediğim gibi do-cument. arasındaki - işaretini çıkar.

Jack Daniel · 31 May 2018

abom' Alıntı:
o zaman şu şekilde dene;

<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu")[0] .style.display=="none") {
do-cument.getElementByClassName("submenu")[0].style.disp lay="block"} else {
do-cument.getElementByClassName("submenu")[0].style.disp lay="none"}
}
</script>

dediğim gibi do-cument. arasındaki - işaretini çıkar.

malesef olmadı.
getElementsByClassName şeklinde yazılması gerek bu şekilde yapınca çalışıyor ama dediğim gibi ilk tıklayışta bişey olmuyor ikincisinde açılıyor menü.

abom · 31 May 2018

O zaman deneme yanılma yap

<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu")[0] .style.display=="none") {
do-cument.getElementByClassName("submenu")[0].style.display="none"} else {
do-cument.getElementByClassName("submenu")[0].style.display="block"}
}
</script>

Blockla none yer değiştir. Oda olmazsa

<script type="text/javascript">
function showSubmenu() {
if(do-cument.getElementByClassName("submenu")[0] .style.display=="none") {
do-cument.getElementByClassName("submenu")[0].style.display=""} else {
do-cument.getElementByClassName("submenu")[0].style.display="none"}
}
</script>

block kodunu kaldır.

Sana bir örnek site vereyim istersen kodlarınıda vereyim ona bak aynı kodu ben orda kullandım ikinci verdiğim örnekteki gibi basınca açılıyor basınca kapanıyor.

Jack Daniel · 31 May 2018

abom' Alıntı:
Blockla none yer değiştir. Oda olmazsa

Ben de tam olarak bunu deniyordum ve sıkıntı bu saçmalıktan dolayıymış. İlgilendiğiniz için çok teşekkür ederim çözdüldü.

Javascript ile dikey açılır menü yapma

Jack Daniel

Üye

monster56

Üye

Jack Daniel

Üye

abom

Uzman üye

Jack Daniel

Üye

abom

Uzman üye

Jack Daniel

Üye

abom

Uzman üye

Jack Daniel

Üye

Sosyal medya sayfalarımız