如何在不修改设置d-none的父级div前提下让其内部子div可见

核心原因 #

CSS规定如果父元素设置了display: none，该元素及其所有子元素都会直接从渲染树中移除，无论子元素如何设置display、z-index等属性，都无法被渲染到页面上，这是CSS底层规则，无法通过子元素样式覆盖实现。

可行解决方案 #

因为你不能修改父容器的d-none类，最稳妥的方式是点击按钮时，将需要展示的目标元素移动到页面上的可见容器内，脱离原隐藏父级的限制，实现展示效果。

实现代码 #

JS代码

$("#btn").on('click', function() {
  const targetEl = $("#text-to-display");
  // 判断元素当前是否在隐藏父级内
  if (targetEl.parent().hasClass('d-none')) {
    // 移动到可见的container容器下，也可根据需求放到其他可见位置
    targetEl.appendTo('.container');
    targetEl.addClass("display-me");
  } else {
    // 放回原父级，实现隐藏效果
    targetEl.appendTo('.col.d-none');
    targetEl.removeClass("display-me");
  }
});

CSS代码

保留你原有的定位样式即可，如果需要和原来d-none d-lg-block的响应式逻辑对齐，仅在大屏幕下展示，可额外补充响应式规则：

.display-me {
  position: absolute;
  top: 30px;
  width: 100%;
  z-index: 9999;
}
/* 适配仅大屏可见的需求 */
@media (max-width: 991.98px) {
  .display-me {
    display: none !important;
  }
}

原HTML结构无需做任何修改，完全满足你不能修改父容器类的要求。

可选替代方案 #

如果不想调整DOM结构位置，你可以给父级内除了目标展示元素之外的所有元素加d-none类，同时移除父级本身的d-none类，既可以保证父级内其他元素隐藏，也可以直接控制目标子元素的显隐，该方案适合你有权限调整父级内其他元素样式的场景。

内容的提问来源于stack exchange，提问作者Sugafree