Einmal vorweg: ich bin absoluter JS-Anfänger!
Google zeigt in seinem Beispiel https://googlesamples.github.i…/patterns/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:
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);Warum wiederholt sich der Ablauf der Funktion bei Google und bei mir nicht?
So funktioniert es auch bei mir:
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>Der originale Googlecode:
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);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