<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .item-with-ul ul{display:none} .item-with-ul ul.show_with{display:block} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { var c = $(".item-with-ul ul") c.each(function(b, a) { $(a).prev().click(function() { c.not($(a).toggleClass("show_with")).removeClass("show_with") }) }) }); </script> </head> <body> <div class="topmenu"> <ul > <li class=""> <a href="#" class="">Itemmenu empty</a> </li> <li class="item-with-ul"> <a href="#" class="touch-with">Itemmenu</a> <ul > <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem2</a></li> </ul> </li> <li class="item-with-ul"> <a href="#" class="touch-with">Itemmenu</a> <ul class="item-with-ul"> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem1</a></li> <li><a href="#">Subitem2</a></li> </ul> </li> <li class=""> <a href="#" class="">Itemmenu</a> </li> </ul> </div> </body> </html>