jquery - 有没有办法通过向父级添加内联样式来隐藏父级 div/容器内的所有 div？

Question

我想弄清楚是否可以通过向父 div 添加内联样式来隐藏父容器内的所有子 div。我已经尝试了 visibility: hidden; 和 display: none; 似乎都没有隐藏子 div。我在想我可以只使用一些 jquery 来遍历所有子 div 并为每个子 div 添加一个内联样式，尽管我认为必须有一种可行的方法。

这是一个例子:

CSS

  .hero-content {
      text-align: center;
      height: 650px;
      padding: 80px 0 0 0;
    }

    .title, .description {
      position: relative;
      z-index: 2
    }

HTML

<div class="hero-content">
   <div class="title"> This is a title </div>  
   <div class="description"> This is a description</div>  
</div>

Answer 1

您不能在父元素上使用内联样式隐藏子元素，所以使用显示: none; 对于您的子元素，您不需要内联样式来执行此操作

.hero-content > div.title,
.hero-content > div.description {
   display: none;
}

或者，如果您要使用 jQuery 解决方案，则将 class 添加到父元素，然后使用下面的选择器。

.hide_this > div.title,
.hide_this > div.description {
   display: none;
}

现在使用 jQuery 在父元素上添加 .hide_this class。

$(".hero-content").addClass("hide_this");

Demo (使用 .addClass() )

---

或者如果你是 inline 风格的粉丝，那么你就可以了

$(".hero-content .title, .hero-content .description").css({"display":"none"});

Demo 2