Hallo!

naviElement.addEventListener("click", navi_ein, false);
naviElement.addEventListener("click", navi_aus, false);

Sobald ich/man auf die Liste zum Einblenden klickt wird die Funktion "navi_ein" ausgeführt, abgearbeitet und die Listen eingeblendet --- ABER sobald die Funktion fertig ist, wird der ursprüngliche Zustand wieder hergestellt und die Listen sind wieder ausgeblendet.

Klar, weil BEIDE Funktionen nacheinander beim Klick ausgeführt werden. Du musst hier nur die aufrufen, die zum aktuellen Status passt. Also ENTWEDER navi_ein ODER navi_aus. Den Status kannst du in einer Variable speichern, oder indem du das Vorhandensein der Klasse abfragst.

Davon ganz abgesehen ist eine so komplexe JavaScript-Lösung nicht nötig. Toggle einfach eine Klasse beim gemeinsamen Elternelement und lass den Rest CSS erledigen.

<nav>  
<p><button id="navi_touch">Öffne/schließe Navigation</button></p>  
<ul>…</ul>  
<ul>…</ul>  
<ul>…</ul>  
</nav>

document.getElementById('navi_touch').addEventListener('click', function() {  
  document.querySelector('nav').[link:https://developer.mozilla.org/en-US/docs/Web/API/Element.classList@title=classList.toggle]('opened');  
});

nav ul { display: none; }  
nav.opened ul { display: block; }

Das ist schon alles. Noch besser wäre es, den Inhalt zugänglich zu verstecken. display: none sorgt nämlich dafür, dass die Navigation für Screenreader und andere Zugangstechniken nicht lesbar ist.

Grüße
Mathias