# Umschreiben von JQuery nach Vanilla JavaScript

**URL:** <https://forum.shopware.com/t/umschreiben-von-jquery-nach-vanilla-javascript/99354>\
**Category:** Programmierung\
**Created:** [17. April 2023 um 07:17 UTC](https://forum.shopware.com/t/umschreiben-von-jquery-nach-vanilla-javascript/99354 "2023-04-17T07:17:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![webarbeit](https://avatars.discourse-cdn.com/v4/letter/w/b487fb/32.png) [@webarbeit](https://forum.shopware.com/u/webarbeit)\
**Post date:** [17. April 2023 um 07:17 UTC](https://forum.shopware.com/t/umschreiben-von-jquery-nach-vanilla-javascript/99354/1 "2023-04-17T07:17:24Z")

</div>

Hallo zusammen,

ich versuche gerade den JS-Code eines Plugins für 6.5.0.0 und Vanilla JavaScript umzuschreiben. Leider fehlt mir hier die Erfahrung und der JS-Code funktioniert bisher noch nicht.

JS-Code für 6.4 - funktioniert:

```auto
import Plugin from 'src/plugin-system/plugin.class';

export default class XYZ extends Plugin {
    init() {
        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
            if (!$(this).next().hasClass('show')) {
                $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
            }
            var $subMenu = $(this).next('.dropdown-menu');
            $subMenu.toggleClass('show');

            $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                $('.dropdown-submenu .show').removeClass('show');
            });

            return false;
        });
    }
}

```

JS-Code für 6.5 - funktioniert nicht. Konsole liefert keine Hinweise:

```auto
import Plugin from 'src/plugin-system/plugin.class';

export default class XYZ extends Plugin {
	init() {
		document.querySelector('.dropdown-menu a.dropdown-toggle').addEventListener('click', function(e) {
			if (!document.querySelector(this).nextElementSibling.classList.contains('show')) {
				document.querySelector(this).parents('.dropdown-menu').first().querySelector('.show').classList.remove('show');
			}
			var $subMenu = document.querySelector(this).next('.dropdown-menu');
			$subMenu.classList.toggle('show');

			document.querySelector(this).parents('li.nav-item.dropdown.show').addEventListener('hidden.bs.dropdown', function(e) {
				document.querySelector('.dropdown-submenu .show').classList.remove('show');
			});

			return false;
		});
	}
}

```

Könnte vielleicht jemand mit Erfahrung einen Blick darauf werfen? Vielen Dank vorab.

Viele Grüße,  
Frank

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [17. April 2023 um 08:21 UTC](https://forum.shopware.com/t/umschreiben-von-jquery-nach-vanilla-javascript/99354/2 "2023-04-17T08:21:13Z")

</div>

> [@webarbeit](#):
>
> ```auto
> document.querySelector('.dropdown-menu a.dropdown-toggle').addEventListener('click', function(e) {
> if (!document.querySelector(this).nextElementSibling.classList.contains('show')) {
> document.querySelector(this).parents('.dropdown-menu').first().querySelector('.show').classList.remove('show');
> }
> var $subMenu = document.querySelector(this).next('.dropdown-menu');
> $subMenu.classList.toggle('show');
> 
> document.querySelector(this).parents('li.nav-item.dropdown.show').addEventListener('hidden.bs.dropdown', function(e) {
> document.querySelector('.dropdown-submenu .show').classList.remove('show');
> });
> 
> return false;
> });
> 
> ```

Teste den eigentlich Code, Block für Block, in deiner Browser Console und kreise so den Fehler ein.

---

<div class="post-metadata">

**Author:** ![AlexGalax](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/alexgalax/32/9925_2.png) [@AlexGalax](https://forum.shopware.com/u/AlexGalax)\
**Post date:** [17. April 2023 um 08:33 UTC](https://forum.shopware.com/t/umschreiben-von-jquery-nach-vanilla-javascript/99354/3 "2023-04-17T08:33:28Z")

</div>

Auf die Schnelle ist mir nur das hier aufgefallen:

```js
document.querySelector('.dropdown-menu a.dropdown-toggle').addEventListener(

```

ist vermutlich nicht richtig, da der Eventlistener nur auf das erste `a.dropdown-toggle`-Element angewendet wird. Du müsstest `querySelectorAll` nehmen, loopen und auf jedes Element den Listener setzen (gilt auch für die anderen EventListener).