Можно ли скрыть переполненные элементы / максимум элементов и показать их с помощью флажка? - PullRequest
Новая
       46

Можно ли скрыть переполненные элементы / максимум элементов и показать их с помощью флажка?

0 голосов
/ 16 марта 2020

довольно плохо знаком с разработкой веб-интерфейса, поэтому я постараюсь задать этот вопрос как можно яснее. Дайте мне знать, если это не имеет смысла или нуждается в разъяснении (engli sh не мой родной язык).

Итак, вот что я хочу сделать:

У меня есть ul-list около 40 li каждый содержит кнопку. Они располагаются с сеткой css с "grid-template-columns: repeat (6, 1fr);"

У меня также есть флажок и метка, которую я использовал для экспериментов с css. Мой вопрос заключается в том, возможно ли изначально показать только первый ряд кнопок li / button (6 li / buttons) и скрыть остальные, а затем показать весь список при установке флажка.

Надеюсь, вопрос имеет смысл, иначе; дай мне знать. Заранее спасибо!

1 Ответ

0 голосов
/ 16 марта 2020

Я уверен, что это возможно, вы можете сделать это, используя JavaScript. вот пример 

**READ THE COMMENTS I AM SURE YOU WILL UNDERSTAND**

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

<p>Click the button to append an item to the end of the list.</p>


<input type="checkbox" name="" onclick="myFunction()">

<script>
function myFunction() {
  var node = document.createElement("LI");
  var nodea = document.createElement("LI");//REPEAT THIS LINE
  var textnode = document.createTextNode("Water");
  var textno = document.createTextNode("New Element");//ADD NEW ITEM HERE
  nodea.appendChild(textno);//REPEAT THIS LINE
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
    document.getElementById("myList").appendChild(nodea);//REPEAT THIS LINE

}
</script>
...