DivMan,
<!DOCTYPE HTML>
<html>
<head>
<style>
.none{display: none;}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="mainMenu">
<li class="item">
<div class="item_title" >Основы языка и как на нём говорить правильно</div>
<ul class="submenu">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Функции</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title" >Обработка ошибок и отладка</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">Объекты и массивы</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
<li class="item">
<div class="item_title">События</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
</ul>
<script>
var mainMenu = document.querySelector(".mainMenu"),
itemChild = mainMenu.querySelectorAll(".submenu");
mainMenu.addEventListener("click", function(e) {
var item = e.target.closest(".item");
var submenu = item.querySelector(".submenu");
var itemTitle = item.querySelector(".item_title");
if (e.target == itemTitle) {
submenu.classList.toggle("none");
for (var i = 0; i < itemChild.length; i++)
if (itemChild[i] != submenu) itemChild[i].classList.add("none")
}
});
</script>
</body>
</html>