JQuery中隐藏父元素后如何显示子元素？如何仅隐藏指定父元素？

一、仅隐藏指定父元素（不递归隐藏子元素） #

你之前用的$("div.content div").hide()会匹配content容器下所有层级的<div>元素，包括.m-music内部的子元素，这就是递归隐藏的原因。要只隐藏目标父元素（也就是.m-music这一行），需要用直接子元素选择器>，只选中content的直接子节点：

• 隐藏单个指定父元素：

  $("div.content > div.m-music").hide();
  

• 如果要隐藏所有待筛选的行（假设这些行都是content的直接子元素）：

  $("div.content > div").hide();
  

这样只会隐藏最外层的父容器，内部子元素不会被影响，后续直接show()父容器时，子元素自然会跟着显示。

二、恢复显示所有子元素（针对已递归隐藏的情况） #

如果已经不小心递归隐藏了所有子元素，需要同时显示.m-music父容器和它内部的所有子元素：

// 同时显示父容器及其所有后代元素
$("div.content div.m-music, div.content div.m-music *").show();

或者更精准地只针对被隐藏的子<div>：

$("div.content div.m-music div").show();

原理是直接覆盖子元素的display:none样式，让它们恢复默认显示状态。

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