javaScript yaşadığım soruna çözüm bulamıyorum

ozermert26 1004 gün önce

510 defa görüntülendi

Merhaba arkadaşlar. Ben bootstrap tarzı bir js frame work yapmak istiyorum. En azından kendi ihtiyaçlarımı karşılamak istiyorum ve aynı kodları defalarca kez yazmak istemiyorum. Yapabiliyor muyum diye deneme yapmak için şu ufak kodu yazdım. Amacım, sadece bir ögeyi göstermek. Fakat bunu yapamıyorum. Kodu test edebilir misiniz? Sorunu size nasıl açıklayabileceğimi bilmiyorum ve zaten test ederseniz göreceksiniz. Ne yapmam gerektiğini yazarsanız memnun olurum. Teşekkürler şimdiden.

<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Denemeler</title>
<script src="/jquery.js"></script>
<script src="/javaScriptFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<button class="acilirPencereAc" data-ac="menu">Menü</button>
<div id="menu" style="display: none;">
<h1>Menü</h1>
<p>Menü denemesi</p>
</div>
<script>
$(function(){
$(".acilirPencereAc").on("click",function(){
$(this).hide();
acilacak=$(this).attr("data-ac");
acilacak='"'+acilacak+'"';
console.log(acilacak);
document.getElementById(acilacak).style="display: block;";
});
});
</script>
</body>
</html>

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (1)

justatakan

1004 gün önce

Merhaba,

Öncelikle hata aldığın kısımdan başlayalım.

acilacak = '"' + acilacak + '"'

Bu kısımda verine çift tırnak eklemene gerek yok. acilacak değişkeni zaten menu değerini ifade eden bir string. Bu satırı kodundan kaldırırsan, doğru bir şekilde çalışacaktır.

$(function(){
    $(".acilirPencereAc").on("click",function(){
    $(this).hide();
        acilacak=$(this).attr("data-ac");
        // console.log(acilacak);
        document.getElementById(acilacak).style="display: block;";
    });
});

Ancak, açılır kapanır pencelereler için illaki bir javascript kodu yazmana gerek yok. Bunu css ile de yapabilirsin. Bunun için label ve input kullanabilirsin.
Aşağıya küçük bir örneğini bıraktım.

<label class="acilirPencereAc" for="menu">Menü</label>
<input class="acilirPencereInput" type="checkbox" id="menu">
<div class="acilirPencere">
    <h1>Menü</h1>
    <p>Menü denemesi</p>
</div>

.acilirPencere {
  display: none;
}

.acilirPencereInput {
  display: none;
}

.acilirPencereInput:checked + .acilirPencere {
  display: block;
}

#006737