Hover durch onclick für mobile ersetzten

Hallo an alle :-)

Typo3 7.6.4
Bootstrap

ich habe folgendes Problem. Ich habe eine Menü mit Typoscript umgesetzt und eingebunden. Das funktioniert soweit auch ganz gut in der Desktopansicht. Schaue ich mir das Ganze nun in der Mobilen Ansicht an, so wird die Hover Funktion auf den Touchscreens ja nicht wirklich unterstützt. Daher möchte ich die Hoverfunktion für den Touchscreen durch klicken ersetzen und hier liegt meine Problem.
Ich bin soweit, dass ich weiß, das es wohl nur mit Javascript geht. In Javascript bin ich allerdings eine Niete.

Hier mein Menü:

lib.navbar = COA
lib.navbar {
    10 = HMENU
    10 {
        1 = TMENU
        1 {
            wrap = <ul class="nav navbar-nav navbar-main">|</ul>
            expAll = 1
            NO = 1
            NO {
                ATagTitle.field = abstract // description // title
                ATagBeforeWrap = 1
                #
                linkWrap = |
                # linkWrap = <mark class="bar"></mark>&nbsp |
                wrapItemAndSub = <li>|</li>
                wrapItemAndSub.override.cObject = COA
                wrapItemAndSub.override.cObject {
            if {
              value = 4
              equals.field = doktype
              isTrue = 1
              isTrue.if {
                value.data = TSFE:page|uid
                equals.field = shortcut
              }
            }
            10 = TEXT
            10.value = <li class="active">|</li>
                }
            }
      
            ACT < .NO
            ACT.wrapItemAndSub = <li class="active">|</li>
      
            CUR < .ACT
      
            IFSUB < .NO
            IFSUB {
                doNotLinkIt = 1
                allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
                wrapItemAndSub = <li class="dropdown">|</li>
      }
      
            ACTIFSUB < .IFSUB
            ACTIFSUB.wrapItemAndSub = <li class="active dropdown">|</li>
      
            CURIFSUB < .ACTIFSUB
      }
    
    
    
    
      2 < .1
      2 {
        wrap =  <ul class="dropdown-menu">|</ul>
        SPC = 1
        SPC = wrapItemAndSub = <li class="divider"></li><li class="dropdown-header">|</li>
        
        ACT < .NO
        ACT.wrapItemAndSub = <li class="active">|</li>
        
        CUR < .ACT
        IFSUB < .NO
        IFSUB {
          doNotLinkIt = 1
          allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret"></b></a>
          wrapItemAndSub = <li class="dropdown">|</li>
        }
        
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="active dropdown">|</li>
        
        CURIFSUB < .ACTIFSUB
      }

      3 < .1
      3 {
        wrap = <ul class="dropdown-menu">|</ul>
        # wrap =  <ul class="dropdown-submenu">|</ul>
        IFSUB >
        ACTIFSUB >
        CURIFSUB >
      }
  }
}

Die CSS dazu:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #ff0000;
    color: #fff;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: 0;
    text-decoration-color: -moz-use-text-color;
    text-decoration-line: none;
    text-decoration-style: solid;
}
.dropdown-menu > li > a {
    clear: both;
    color: #333;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 3px;
    white-space: nowrap;
}

/* optional */

.open > .dropdown-menu .dropdown-menu {

    top:-1px;
    left:50%;
}

.dropdown-menu {
   margin:0;
   width:220px;
}

/* must */

.open > .dropdown-menu li:hover .dropdown-menu {
    
display: block;
  
}

Gibt es da einen Weg ohne Javascript? Und wenn mit Javascript, wie muss das aussehen?

Gruß

Irgendwas ist beim posten schief gelaufen, vielleicht kann jemand die doppelten Post wieder löschen.

Danke und Gruß