使用媒体查询css3隐藏内容时重复的ID答案

【问题标题】：duplcate id's when hidding content using media query css3使用媒体查询css3隐藏内容时重复的ID
【发布时间】：2020-10-21 02:16:20
【问题描述】：

使用 bootstrap 4 和 vuejs desktop 有一个容器，带有一个选项卡窗格和地图。在移动设备上，我删除了选项卡窗格并只显示地图。

以下代码是问题的简单表示。选项卡窗格和地图在桌面上高度交互。在移动设备上，我只想以最少的交互性显示地图，因为选项卡窗格是隐藏的

           <div class="d-sm-none">
                small
                <div id="mapid" style="width: 100%; height:300px"></div>
            </div>
            <div class="d-none d-md-block">
                large
                <div id="mapid" style="width: 100%; height:300px"></div>
            </div>

首先显示的 div。例如，在上面的代码中，地图将显示在移动设备上，而不是桌面设备上。如果我重新排列代码，桌面版可以运行，而移动版则不行。

下面是我显示地图的 vue 代码。我使用传单。

           this.map = L.map('mapid', {
                center: this.center,
                zoom: this.zoom
            });

如何让它工作？

【问题讨论】：

使用不同的 ID？ ID 必须是唯一的，不要反其道而行之，这将是一场艰苦的战斗。
我知道 id 必须是唯一的。我不明白 id 何时在响应式媒体查询中重复？我认为代码会被隐藏，导致 id 被删除。如果我使用不同的 id，如何在媒体查询的 javascript 代码中选择 id？
该元素没有从 DOM 中删除，它只是被隐藏了，我已经发布了一个答案，应该可以解决您的问题。
谢谢，让我试试你的解决方案...

标签： html css bootstrap-4 media-queries

【解决方案1】：

正确的解决方案是不要有重复的 ID。如果这超出了您的控制范围，您可以直接将 div 而非 ID 传递给 Map constructor

您还需要确定哪个是可见的。

function getFirstVisible(els) {
  for (const el of els) {
    if (el.offsetParent) {
      return el;
    }
  }
}

const divs = document.querySelectorAll("#mapid");

// Then you could do
// this.map = L.map(getFirstVisible(divs), {center: this.center, zoom: this.zoom});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="d-sm-none">
  small
  <div id="mapid" style="width: 100%; height:300px"></div>
</div>
<div class="d-none d-md-block">
  large
  <div id="mapid" style="width: 100%; height:300px"></div>
</div>

见Check if element is visible in DOM

【讨论】：