Mobile Seite - Wiederholungen von function geht nicht!

AnonymusChaotic

Einmal vorweg: ich bin absoluter JS-Anfänger!

Google zeigt in seinem Beispiel https://googlesamples.github.io/web-fundamenta…off-canvas.html dass bei ausreichend schmalem Browserfenster die Seitenleisten verschwinden.

Klickt man auf die mittelblaue div geht zuerst die linke, dann die rechte div auf und die linke zu, dann die linke zu und anschließend alles wieder von vorne.

Soweit, sogut.

Will ich aber die rechte Div entfernen und den Vorgang auf zwei Klicks reduzieren, funktioniert das auch halbwegs gut, nach zwei Klicks ist aber Schluss mit der Animation.

Mein Code sieht dazu so aus:

JavaScript

var position = 0;
      var mainPanel = document.getElementById("mainPanel");
      var leftDrawer = document.getElementById("leftDrawer");
		console.log("start");




      function toggle(evt) {
        position++;
          if (position == 1) {
          leftDrawer.classList.add("open");
          console.log("2");
        } else {
          leftDrawer.classList.remove("open");
          console.log("3");




        }  
      }

      mainPanel.addEventListener("click", toggle);
      leftDrawer.addEventListener("click", toggle);

Alles anzeigen

Warum wiederholt sich der Ablauf der Funktion bei Google und bei mir nicht?

So funktioniert es auch bei mir:

JavaScript

var position = 0;
      var mainPanel = document.getElementById("mainPanel");
      var leftDrawer = document.getElementById("leftDrawer");
		console.log("start");




      function toggle(evt) {
        position++;
			 if (position == 1) {
          leftDrawer.classList.add("open");
          console.log("2");
        } else {
          leftDrawer.classList.remove("open");
          console.log("3");
          position = 0;
        }  
      }

      mainPanel.addEventListener("click", toggle);
      leftDrawer.addEventListener("click", toggle);


    </script>

Alles anzeigen

Der originale Googlecode:

JavaScript

JS aus https://googlesamples.github.io/web-fundamentals/samples/fundamentals/design-and-ui/responsive/patterns/off-canvas.html




   var position = 0;
      var mainPanel = document.getElementById("mainPanel");
      var leftnav = document.getElementById("leftDrawer");
      var rightDrawer = document.getElementById("rightDrawer");




      function toggle(evt) {
        position++;
        if (position % 3 == 0) {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.remove("open");
        } else if (position % 3 == 1) {
          leftDrawer.classList.add("open");
          rightDrawer.classList.remove("open");
        } else {
          leftDrawer.classList.remove("open");
          rightDrawer.classList.add("open");
        }  
      }




      mainPanel.addEventListener("click", toggle);
      leftDrawer.addEventListener("click", toggle);
      rightDrawer.addEventListener("click", toggle);

Alles anzeigen

Zitat von https://developers.google.com/web/

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.

Zuletzt aktualisiert am Dezember 10, 2015

Jetzt mitmachen!