ColT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style>
.tree {
width: 200px;
}
.tree,
.tree ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.tree a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
position: relative;
}
.tree a:hover {
background-color: #ccc;
}
.sub > a {
background-color: #4169e1;
}
.sub > a + ul {
max-height: 0;
transition: 1s;
overflow: hidden;
}
.sub > a.active + ul {
max-height: var(--hh, 0px);
transition: 1s;
}
.sub > a.active {
background-color: #0000cd;
}
.sub > a::after {
font: 1em;
font-weight: bold;
content: '+';
position: absolute;
right: 5px;
top: 2px;
color: #ffffff;
border: 1px solid #ffffff;
height: 12px;
width: 12px;
border-radius: 2px;
line-height: 12px;
text-align: center;
}
.sub > a.active::after {
content: '-';
}
.sub > a:focus {
outline: none;
}
</style>
</head>
<body>
<ul class="tree" id="menu">
<li class="sub">
<a href="#" title="">Меню 1</a>
<ul>
<li>
<a href="#" title="">Меню 1.1</a>
</li>
<li>
<a href="#" title="">Меню 1.2</a>
</li>
<li>
<a href="#" title="">Меню 1.3</a>
</li>
</ul>
</li>
<li class="sub">
<a href="#" title="">Меню 2</a>
<ul>
<li>
<a href="#" title="">Меню 2.1</a>
</li>
<li>
<a href="#" title="">Меню 2.2</a>
</li>
<li>
<a href="#" title="">Меню 2.3</a>
</li>
</ul>
</li>
<li class="sub">
<a href="#" title="">Меню 3</a>
<ul>
<li class="sub">
<a href="#" title="">Меню 3.1</a>
<ul>
<li>
<a href="#" title="">Меню 3.1.1</a>
</li>
<li>
<a href="#" title="">Меню 3.1.2</a>
</li>
<li>
<a href="#" title="">Меню 3.1.3</a>
</li>
</ul>
</li>
<li class="sub">
<a href="#" title="">Меню 3.2</a>
<ul>
<li class="sub">
<a href="#" title="">Меню 3.2.1</a>
<ul>
<li>
<a href="#" title="">Меню 3.2.1.1</a>
</li>
<li>
<a href="#" title="">Меню 3.2.1.2</a>
</li>
</ul>
</li>
<li>
<a href="#" title="">Меню 3.2.2</a>
</li>
<li>
<a href="#" title="">Меню 3.3.3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
let linkActive = JSON.parse(
localStorage.getItem('linkActive') || '{"0" : true}'
);
const parent = document.querySelector('.tree');
const ulToggle = a => {
let ul = a.nextElementSibling;
const hh = ul.scrollHeight;
const up = a.classList.contains('active');
do {
if (ul.nodeName == 'UL') {
let h = parseFloat(ul.style.getPropertyValue('--hh')) || 0;
h += up ? -hh : hh;
h = Math.max(0, h);
ul.style.setProperty('--hh', `${h}px`);
}
ul = ul.parentElement;
} while (ul !== parent);
a.classList.toggle('active');
const i = a.dataset.i;
linkActive[i] = !up;
};
parent.querySelectorAll('.sub > ul').forEach((ul, i) => {
const a = ul.previousElementSibling;
a.dataset.i = i;
const li = ul.closest('li');
const LiParent = li.closest('ul');
if (linkActive[i]) ulToggle(a);
a.addEventListener('click', event => {
event.preventDefault();
ulToggle(a);
[...LiParent.children].forEach(el => {
if (el != li) {
const a = el.querySelector('a.active ');
if (a) {
ulToggle(a);
}
}
});
localStorage.setItem('linkActive', JSON.stringify(linkActive));
});
});
});
</script>
</body>
</html>