Javascript 在选定行下具有下拉行的响应网格

是的，我真的不知道该怎么解释。基本上，我想要一个响应性强的“项目”网格（简单的网格或flexbox）。但是，我也希望它在当前所选项目下方的行中显示说明

我有办法做到这一点，但它的响应性和可扩展性都不是很好（每次我需要插入一个新项目时，我都要在HTML中转换内容，我经常这样做）

以下是我目前正在处理的问题：

<!-- Row 1 -->
<ul class="row">
    <li><a class="tablinks" onclick="openCity(event, 'description1')>Item 1</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description2')>Item 2</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description3')>Item 3</a></li>
</ul>

<div id="description1" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 1</span>
</div>
<div id="description2" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 2</span>
</div>
<div id="description3" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 3</span>
</div>

<!-- Row 2 -->
<ul class="row">
    <li><a class="tablinks" onclick="openCity(event, 'description4')>Item 4</a></li>
    <li><a class="tablinks" onclick="openCity(event, 'description5')>Item 5</a></li>
</ul>

<div id="description4" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 4</span>
</div>
<div id="description5" class="tabcontent">
    <span onclick="this.parentElement.style.display='none';">Description 5</span>
</div>


<!-- onclick script -->
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
function scrollWin() {
    window.scrollTo(0, 0);
}
</script>

项目2
也许不是您要寻找的结构，但您可以利用CSS网格和
稠密的
自动流布局算法

我在这里使用了一个
：hover
，但您可以使用少量javascript/Jquery对其进行修饰

这里的概念是，当显示“说明”时，它会自动填充整行（
网格列：1/-1
），因此，这一行将被包装成自己的行，并且由于
自动流动：稠密
，回填后的项目会占据留下的空白


.container{
宽度：80%；
保证金：自动；
显示：网格；
网格模板列：重复（2，1fr）；
网格自动流动：行密集；
网格间距：1米；
}
项目
.描述{
边框：1px纯灰；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：30px；
}
.项目{
背景：浅蓝色；
过渡：背景0.25秒；
}
.项目：悬停{
背景：丽贝卡紫；
}
.项目：悬停+描述{
显示：块；
}
.描述{
背景：一枝黄花；
显示：无；
网格柱：1/-1；
}
@介质（最小宽度：700px）{
.集装箱{
网格模板列：重复（3，1fr）；
}
}

1.
说明1
2.
说明2
3.
说明3
4.
说明4
5.
说明5
6.
说明6
所以只有一个描述字段，根据所选项目进行更新？那样的话，它不是总是在底部吗？还是希望它始终显示在所选项目正下方的行上？还要注意的是，您不能有重复的ID，除此之外，您想要的输出还有一些无效的标记；我想这只是一个复制粘贴错误：）是的，在所选项目下面只有一个描述字段。如果选择了其他项目，则旧项目将消失。我当前的代码将相关描述放在每一行之后，但它没有响应，因此如果页面被压扁，它将向下显示两行。很抱歉重复的ID，出于隐私原因，我刚从当前代码中更改了它们。如果我开始在stack exchange上乱扔别人的名字，我的雇主可能会生气，哈哈。我修正了ID，他们在我的网站的直播版上都很好。这正是我所希望的！谢谢我将尝试找出一种方法使其在选中时保持活动状态。我可以用：聚焦而不是：悬停来做点什么吗？我对CSS的交互部分没有太多经验。我还在学习网格布局，为什么“网格列：1/-1”占据了整行？这是否意味着从第1列开始，一直延伸到第1行的末尾（-1）？
<div class="wrapper">
    <div class="item" onclick="showDesc(event, 'description1'>Item 1</div>
    <div class="item" onclick="showDesc(event, 'description2'>Item 2</div>
    <div class="item" onclick="showDesc(event, 'description3'>Item 3</div>
    <div class="item" onclick="showDesc(event, 'description4'>Item 4</div>
    <div class="item" onclick="showDesc(event, 'description5'>Item 5</div>
</div>

<div if="description1" class="description">Description 1</div>
<div if="description2" class="description">Description 2</div>
<div if="description3" class="description">Description 3</div>
<div if="description4" class="description">Description 4</div>
<div if="description5" class="description">Description 5</div>