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

Question

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

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

           <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
            });

如何让它工作？

Answer 1

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

而不是传递 ID

您还需要弄清楚哪一个是可见的。

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

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

duplcate id's when hidding content using media query css3

html

css

media-queries

bootstrap-4