Вопросы Теги

Отключение после нажатия на addClass

Вот не мутирующее решение, использующее только рекурсию и срез (). 

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/

0
задан user2705121 7 March 2019 в 15:15
поделиться

1 ответ

Я думаю, что вы ищете только вопрос добавления и удаления классов 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>

0
ответ дан Louys Patrice Bessette 7 March 2019 в 15:15
поделиться
Другие вопросы по тегам:

Похожие вопросы: