Şu JS Kodu Neden Çalışmıyor Olabilir, Basit Bir Sorun Var Gibi?

17-02-2022, 04:32:40

Submenu için bir aç/kapa CSS'ini JS ile eklemeye çalışıyorum ama JS bilgim çok az. Aşağıdaki kod basit bir hata veriyor belli ama çözemedim, sorun nedir acaba?

$(".menu-item-has-children").click(function() {
   $(".sub-menu").css("display","block");
})

Konsoldan baktığımda 1. satırın sonunda Yakalanmayan TypeError: $ bir işlev değil hatasını gördüm.

JS kodunu dosyaya ekleyince tüm JS'ler çalışmaz oluyor.

17-02-2022, 04:39:22

#2

Misafir

Büyük ihtimalle jquery i tanımıyor. Vanilla js sorun çıkarmayacaktır. Aşağıdaki kod çalışacaktır.

document.querySelector('.menu-item-has-children').addEventListener('click',()=>{
    document.querySelector('.sub-menu').setAttribute('style','display:block')
})

firstozdemir, SkyGhostAir ve entriko bunu beğendi.

3 kişi bunu beğendi.

17-02-2022, 04:40:51

#3

ZEON

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Submenu için bir aç/kapa CSS'ini JS ile eklemeye çalışıyorum ama JS bilgim çok az. Aşağıdaki kod basit bir hata veriyor belli ama çözemedim, sorun nedir acaba?

$(".menu-item-has-children").click(function() {
   $(".sub-menu").css("display","block");
})

Konsoldan baktığımda 1. satırın sonunda Yakalanmayan TypeError: $ bir işlev değil hatasını gördüm.

JS kodunu dosyaya ekleyince tüm JS'ler çalışmaz oluyor.

jQuery tanımını kontrol edin, sonra şu şekilde çalıştırmayı deneyin;

(function($) {
$(".menu-item-has-children").click(function() {
   $(".sub-menu").css("display","block");
})
}(jQuery));

17-02-2022, 04:56:58

#4

SkyGhostAir

"display: none" - "display: block" eklemek mi daha sağlıklı olur yoksa submenu için bir CSS Class'ı tanımlatıp ona display: block eklemek mi daha sağlıklı olur?

Birde Vanilla JS ile tam tersi ekleneni kaldırmayı nasıl yapabilirim?

17-02-2022, 05:02:12

#5

ZEON

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

"display: none" - "display: block" eklemek mi daha sağlıklı olur yoksa submenu için bir CSS Class'ı tanımlatıp ona display: block eklemek mi daha sağlıklı olur?

Birde Vanilla JS ile tam tersi ekleneni kaldırmayı nasıl yapabilirim?

Css ile tanımladığınız class'ı toggleClass ile kullanmanız daha doğru olur.

17-02-2022, 05:45:28

#6

SkyGhostAir

ZEON adlı üyeden alıntı: mesajı görüntüle

Css ile tanımladığınız class'ı toggleClass ile kullanmanız daha doğru olur.

Böyle sanırım? Yaptım ama sadece ilk menüde çalışıyor diğerlerinde çalışmıyor, sebebi nedir acaba hocam?

var submenu = document.querySelector('.menu-item-has-children');
var addsubmenu = document.querySelector('.sub-menu');
var addsubmenuClass = 'active';

submenu.addEventListener( 'click', function() {
    addsubmenu.classList.toggle(addsubmenuClass);
}, false);

1'den fazla alt menüsü olan item var.

17-02-2022, 05:47:40

#7

Misafir

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

"display: none" - "display: block" eklemek mi daha sağlıklı olur yoksa submenu için bir CSS Class'ı tanımlatıp ona display: block eklemek mi daha sağlıklı olur?

Birde Vanilla JS ile tam tersi ekleneni kaldırmayı nasıl yapabilirim?

document.querySelector('.sub-menu').classList.toggle('sub-menu')

şeklinde classlistte o öğenin tam tersi konuma gelmesini sağlayabilirsiniz

class ekleme

document.querySelector('.sub-menu').classList.add('sub-menu')

class silme

document.querySelector('.sub-menu').classList.remove('sub-menu')

css tanımlamanız daha profesyonel olacaktır.

SkyGhostAir bunu beğendi.

1 kişi bunu beğendi.

17-02-2022, 05:55:06

#8

SkyGhostAir

Misafir adlı üyeden alıntı: mesajı görüntüle

document.querySelector('.sub-menu').classList.toggle('sub-menu')

şeklinde classlistte o öğenin tam tersi konuma gelmesini sağlayabilirsiniz

class ekleme

document.querySelector('.sub-menu').classList.add('sub-menu')

class silme

document.querySelector('.sub-menu').classList.remove('sub-menu')

css tanımlamanız daha profesyonel olacaktır.

Anladım hocam. Kodun son hali şöyle, istediğimi yaptım sadece üstteki mesajımda yazdığım sorun kaldı. 1. menu item'den sonrasında çalışmadı. Sayfada 1'den fazla .menu-item-has-children olması durumunda ne yapmak lazım. Sadece kendi altındaki .sub-menu'de çalışmalı.

var submenu = document.querySelector('.menu-item-has-children');
var addsubmenu = document.querySelector('.sub-menu');
var addsubmenuClass = 'active';

submenu.addEventListener( 'click', function() {
    addsubmenu.classList.toggle(addsubmenuClass);
}, false);

1'den fazla alt menüsü olan item var.

17-02-2022, 06:10:43

#9

ZEON

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Anladım hocam. Kodun son hali şöyle, istediğimi yaptım sadece üstteki mesajımda yazdığım sorun kaldı. 1. menu item'den sonrasında çalışmadı. Sayfada 1'den fazla .menu-item-has-children olması durumunda ne yapmak lazım. Sadece kendi altındaki .sub-menu'de çalışmalı.

var submenu = document.querySelector('.menu-item-has-children');
var addsubmenu = document.querySelector('.sub-menu');
var addsubmenuClass = 'active';

submenu.addEventListener( 'click', function() {
    addsubmenu.classList.toggle(addsubmenuClass);
}, false);

1'den fazla alt menüsü olan item var.

querySelector ile aldığınız için bir tanesini alıyorsunuz. querySelectorAll kullanırsanız tümünü dizi olarak alırsınız.
querySelectorAll kullandığınızda bir array elde edeceksiniz, fonksiyonu bu diziye uygulayarak tümünde çalışmasını sağlayabilirsiniz.

Örnek;

let items = document.querySelectorAll(".custom-class");
    items.forEach(element => {
        element.addEventListener('click', () => {
            element.classList.toggle("additional-class")
        });
    });

Örneği kendinize göre uyarlayarak kullanabilirsiniz. jQuery kullanmak isterseniz mantık yine aynı.