Вот не мутирующее решение, использующее только рекурсию и срез ().
const splitToChunks = (arr, chunkSize, acc = []) => (
arr.length > chunkSize ?
splitToChunks(
arr.slice(chunkSize),
chunkSize,
[...acc, arr.slice(0, chunkSize)]
) :
[...acc, arr]
);
Тогда просто используйте его, как splitToChunks([1, 2, 3, 4, 5], 3)
, чтобы получить [[1, 2, 3], [4, 5]]
.
Здесь это скрипка для вас: https://jsfiddle.net/6wtrbx6k/2/
Я думаю, что вы ищете только вопрос добавления и удаления классов CSS.
Нажмите, добавьте greyed
и удалите highlighted
для всех элементов.
Инверсия для элемента, по которому щелкнули.
Если вы просто улучшите стиль (не чувствую усилий в этом демо) двух классов переключения ... У вас есть стартер.
Что-то вроде:
$('#cssmenu li.has-sub a').on('click', function(e){
e.preventDefault();
$(".has-sub").removeClass("highlighted").addClass("greyed");
$(this).parents(".has-sub").addClass("highlighted").removeClass("greyed");
});
a{
text-decoration:none;
color:black;
}
.highlighted{
background-color:cyan;
}
.highlighted a{
color:red;
}
.greyed{
background-color:#bbb;
}
.greyed a{
color:#444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="cssmenu">
<li class="has-sub">
<ul>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
</ul>
</li>
<li class="has-sub">
<ul>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
</ul>
</li>
<li class="has-sub">
<ul>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
<li>
<a href="#">Anchor</a>
</li>
</ul>
</li>
</ul>