SnezhanaLast, уберите из CSS:
.page-sidebar-menu.page-sidebar-menu-active-submenu li > .sub-menu {
display: inline-block !important;
}
Вот так должно работать:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
.submenu-hide {
display: none;
}
</style>
</head>
<body>
<ul class="page-sidebar-menu">
<li class="sidebar-menu-item">
<a href="#">One</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#">Two</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#">Three</a>
<ul class="sub-menu submenu-hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script>
var menu = document.querySelector('.page-sidebar-menu'),
subMenu = document.querySelectorAll('.sub-menu'), current;
menu.onclick = function(e) {
var target = e.target;
while(target != this) {
if ( target.classList.contains('sub-menu') ) break;
if ( target.classList.contains('sidebar-menu-item') ) {
current = target.querySelector('.sub-menu');
[].forEach.call(subMenu, function(item) {
if (item == current) return;
item.classList.add('submenu-hide');
});
current.classList.toggle('submenu-hide');
break;
}
target = target.parentNode;
}
return false;
};
menu.onmousedown = menu.onselectstart = function() {
return false;
};
</script>
</body>
</html>
И да, добавьте еще класс элементам sidebar-menu-item <li>, которые являются основными пунктами меню.
