DivMan,
<!DOCTYPE HTML>
<html>
<head>
<style>
.none{display: none;}
ul{
list-style: none;
padding: 0;
}
.submenu{
background: #e7e7e7;
}
.item_title{
background: #696666;
cursor: pointer;
}
.active{background: #ff8663;}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="mainMenu">
<li class="item">
<div class="item_title active" >Основы языка и как на нём говорить правильно</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");
itemTitle.classList.toggle("active");
for (var i = 0; i < itemChild.length; i++)
if (itemChild[i] != submenu) {
itemChild[i].classList.add("none");
itemChild[i].previousElementSibling.classList.remove("active");
}
}
});
</script>
</body>
</html>