Hallo
jQuery ist dann wirklich ein ziemlich großer Overhead. Die Standard-DOM-API bietet dafür auch schon eine Funktion:
document.getElementById('foo').classList.toggle('className');
OK prima. Ich habe da mal was gebastelt :-)
http://spaceart.de/test4.php
Und das funktioniert soweit schon mal ganz gut.
Hier der Code dazu:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<style>
.klapp-auf {display: none;}
.klapp-zu {display: block;}
.klapp-button {cursor:pointer;}
</style>
</head>
<body>
<p class="klapp-button">
xxx
</p>
<p class="klapp-auf">
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
xxx<br>
</p>
<script>
var icon = document.querySelector('.klapp-button');
icon.addEventListener('touch',showMenu,true);
icon.addEventListener('click',showMenu,true);
function showMenu(ev) {
document.querySelector('.klapp-auf').classList.toggle('klapp-zu');
}
</script>
</body>
</html>
Für ältere IEs, die classList nicht unterstüzten, gibt es Polyfills.
Das habe ich leider noch nicht verstanden.
Gruß
Ingo