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 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>
<li class="item">
<div class="item_title">События</div>
<ul class="submenu none">
<li>Лексическая структура</li>
<li>Типы данных, значения и переменные</li>
<li>Выражения и операторы инструкции</li>
</ul>
</li>
</ul>
<script>
window.addEventListener("DOMContentLoaded", function() {
var items = document.querySelectorAll(".item"),
temp;
[].forEach.call(items, function(item) {
var submenu = item.querySelector(".submenu");
var itemTitle = item.querySelector(".item_title");
itemTitle.addEventListener("click", function(e) {
temp && temp != submenu && temp.classList.add("none");
submenu.classList.toggle("none");
temp = submenu
})
})
});
</script>
</body>
</html>
