Не очень хороший вариант, не кроссбраузерный, зато без всяких jQuery (советую кстати начать изучение без использования всяких либ, что так сказать, понимать что происходит под капотом):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.tree a{
cursor: pointer;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<a>Телефоны</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>Планшеты</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>Ноутбуки</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var tree = document.querySelector('.tree');
var labels = tree.querySelectorAll('a');
var onLabelClick = function(event) {
event.preventDefault();
var li = this.parentNode;
var ul = li.parentNode;
var active = ul.dataset.active;
if (active != null) {
ul.children[active].lastElementChild.style.display = 'none';
}
var subtree = this.nextElementSibling;
var isHidden = subtree.style.display == 'none';
subtree.style.display = isHidden ? '' : 'none';
ul.dataset.active = Array.prototype.indexOf.call(ul.children, li);
};
Array.prototype.forEach.call(labels, function(label) {
if (!label.href) {
label.addEventListener('click', onLabelClick);
var subtree = label.nextElementSibling;
subtree.style.display = 'none';
}
});
</script>
</body>
</html>