[ERLEDIGT] Javascript reagiert erst beim zweiten Klick

[Jenni1990]

Hallo,
Ich habe schon des öfteren toggle Funktionen auf Webseiten eingebaut (meist um bestimmte Divs ein/auszublenden).
Jetzt möchte ich ein Menü, welches für jede Art von Device nutzbar ist. Deshalb soll es einmal den Menüpunkt selbst geben und daneben einen "<" um das Untermenü auf Klick (weil Smartphones und Tablets nunmal keinen Hover Effekt haben) und beim Hovern auszuklappen.
Mein Klick funktioniert aber leider erst beim zweiten Versuch. Könnt ihr mir sagen wie ich es schaffe, dass die Funktion beim ersten mal direkt aufgerufen wird?
Menüpunkt im HTML

<div class="header-menu">
        <div class="menu-hauptmenu-container">
            <ul id="menu-hauptmenu-1" class="FirstMenuLevel">
                <!-- Dienstleistungen -->
                <li id="menu-item-dienstleistungen" class="MenuItem-FirstMenuLevel">
                    <a href="<?php bloginfo('url')?>/dienstleistungen/">Dienstleistungen</a>&nbsp;
                    <a href="javascript:toggleMenu('sub-menu-Dienstleistungen', 'sub-link-dienstleistungen');" id="sub-link-dienstleistungen">∨</a>
                </li>

ausgeblendetes Untermenü im HTML

<!-- Untermenues mit Wordpress automatisch generiert -->
            <!-- Dienstleistungen -->
            <div class="sub-menu-container" id="sub-menu-Dienstleistungen">
            <!-- Hier Menü einfügen -->
                <?php wp_nav_menu( array(    'menu' => 'dienstleistungen','menu_class' => 'first-sub-menu'));?>
      </div>

Javascript Funktion

function toggleMenu(element, selector) {
            if(document.getElementById(element).style.display == 'none')
            {
                document.getElementById(element).style.display = 'block';
                document.getElementById(selector).innerHTML = '<';
            }else{
                document.getElementById(element).style.display = 'none';
                document.getElementById(selector).innerHTML = '∨';
            }
        }

CSS

.sub-menu-container{
    display:none;
}

Vieln Dank schonmal im Voraus.
LG Jenni

 

[SpiceLab]

function toggleMenu(element, selector) {
   if(document.getElementById(element).style.display == 'block') {
      document.getElementById(element).style.display = 'none';
      document.getElementById(selector).innerHTML = '∨';
   }else{
      document.getElementById(element).style.display = 'block';
      document.getElementById(selector).innerHTML = '<';
   }
}

https://jsfiddle.net/spicelab/o5cjv7jj/

 

[Jenni1990]

So funktioniert es nicht. Dann fehlt ja ein "{"...

 

[SpiceLab]

So funktioniert es nicht. Dann fehlt ja ein "{"...

Sorry, die öffnende {-Klammer der if-Bedingung ist lediglich beim nachträglichen Zusammenrücken der Code-Zeilen verschütt gegangen.

Bitte nochmal... :)

 

[Jenni1990]

Danke, so funktioniert es.