即使在其中1个附加了1个元素之后，如何总是出现3个元素？

Question

我只需要最大3个元素即可始终出现在屏幕上，如果其中一个元素被删除，那么下的下一个元素将其位置，依此类推，直到没有元素为止。

这是代码段：

<div class="mob-keys-container" id="mob-keys-container">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_1_mob" src="./images/5.1.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_2_mob" src="./images/5.2.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_3_mob" src="./images/5.3.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_4_mob" src="./images/5.4.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_5_mob" src="./images/5.5.png" alt="key">
        <img class="answerIcon mobIcon active" draggable="true" id="answer_6_mob" src="./images/5.6.png" alt="key">

 </div>

这是有效的最佳代码：

$('.info-mob').on('click', () => {
        $('#mob-keys-container').toggle();
        $('#mob-keys-container').children().slice(0, 3).show();
    });

.info-mob打开一个包含所有元素的选项卡，虽然打开，但应有最大3个元素。如果我再次关闭并打开该选项卡，一切正常，但是即使我附加具有不同函数的元素，我也需要它更具动态性，并且始终是最大3个元素。

Answer 1

我认为这将在CSS的帮助下解决您的问题

#mob-keys-container *{
  display:none;
}

#mob-keys-container *:nth-child(-n+3){
  display:block;
}