Problem mit Toggle-Funktion

Hallo,

hier ist mein Code:

    var toggle = true;

function doNotToggle() {
    toggle = false;
}

var works = document.querySelector('#works');
var cross_one = document.querySelector('#cross_one');
var works_navigation = document.querySelector('#works_navigation');
works.addEventListener('click', function (event) {
      if (toggle) {
          if (cross_one.style.display == "") {
              cross_one.style.display = "none";
              works_navigation.style.display = "block";
          } else {
              cross_one.style.display = "";
              works_navigation.style.display = "none";
          }
      }
});

Dieser bewirkt eine Toggle-Funktion, wenn eine SVG-Grafik angeklickt wird. Wenn ein Link innerhalb der SVG-Grafik angeklickt wird, wird die Toggle-Funktion komplett gestoppt, auch wenn man außerhalb des Links, die SVG-Grafik anklickt. Ich möchte aber, dass der Toggle nur zu dem Zeitpunkt gestoppt wird, wenn der Link angeklickt wird. Wenn ein anderer Bereich der SVG-Grafik angeklickt wird, soll die Toggle-Funktion weiterhin bestehen.

Kann mir da jemand helfen?

Danke!

Hi basti1012 ,

aktuell sieht es so aus:
https://jsfiddle.net/1z834uf7/2/

Die Probleme liegen jetzt woanders.

1. Wenn man durch die Galerien klickt (die divs mit dem weißen Text auf schwarzem Hintergrund), schaltet das Icon um. Das soll nicht passieren.

2. Wenn man das Icon mit der Draggable-Funktion bewegt, bewegen sich die Galerien mit. Das soll auch nicht passieren.

3. Wenn die Galerien geöffnet sind und man auf das Icon klickt, sollen sich diese schließen.

4. Wenn man auf »Zwei« klickt, erscheint zu beginn nur ein schwarzer Streifen. Wieso?

Kannst du mir bitte helfen?