Javascript 扩展输入时隐藏标题，最小化输入时显示标题

我有一个示例代码，它用css动画显示搜索查询

我想知道，当搜索查询展开时，如何隐藏“title”类，当搜索查询最小化时如何再次显示它

这是两个州的示例图像（正如您所看到的，在搜索文本后面可以看到“title”，我不想看到）：

我知道在jquery中我可以像这样隐藏它（再次显示它，我不知道逻辑将如何进行）：

但是我怎么能只用CSS呢

代码段正在工作，但显示不正确，尽管我不知道原因

$（'.opener'）。单击（函数（）{
$（this）.parent（'.search'）.toggleClass（'inactive'）.find（'input'）.focus（）；
});
.row{
边框：1px纯红；
}
.头衔{
字体大小：16px；
字体大小：粗体；
位置：绝对位置；
利润率：6px0；
}
.输入组{
显示器：flex；
高度：36px；
宽度：100%；
溢出：隐藏；
填充：0；
/*背景色：rgba（100100100.1）*/
光标：指针；
/*边界半径：2px*/
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
/*盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）*/
}
.输入组：活动，
.输入组：悬停{
/*背景色：rgba（100100100.1）*/
}
.input-group.CENTED{
保证金：0自动；
}
.input group.input group插件{
证明内容：中心；
宽度：36px；
背景：透明；
边界：无；
显示器：flex；
文本对齐：居中；
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
}
.input group.input group addon i{
高度：24px；
宽度：24px；
自对准：居中；
颜色：#777；
}
.输入组输入{
字体系列：“Roboto”，无衬线；
背景：透明；
边界：无；
盒影：无！重要；
字体大小：16px；
填充：0；
}
.不活跃{
宽度：36px；
边界半径：18px；
背景：透明；
盒影：无；
}
.inactive.input组加载项：非（：第一个子项）{
不透明度：0；
}
.行{
边缘顶部：1米；
}

搜索输入
标题
搜索
清楚的
您可以使用来选择
div.title
。
为with display:none属性添加另一个类并切换该类


$（“p”）.hide（）；
$（'.opener'）。单击（函数（）{
$（this）.parent（'.search'）.toggleClass（'inactive'）.find（'input'）.focus（）；
$（this）.parent（'.search'）。同胞（'div.title'）。toggleClass（'hideTitle'））
});
.row{
边框：1px纯红；
}
.头衔{
字体大小：16px；
字体大小：粗体；
位置：绝对位置；
利润率：6px0；
}
.输入组{
显示器：flex；
高度：36px；
宽度：100%；
溢出：隐藏；
填充：0；
/*背景色：rgba（100100100.1）*/
光标：指针；
/*边界半径：2px*/
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
/*盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）*/
}
.输入组：活动，
.输入组：悬停{
/*背景色：rgba（100100100.1）*/
}
.input-group.CENTED{
保证金：0自动；
}
.input group.input group插件{
证明内容：中心；
宽度：36px；
背景：透明；
边界：无；
显示器：flex；
文本对齐：居中；
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
}
.input group.input group addon i{
高度：24px；
宽度：24px；
自对准：居中；
颜色：#777；
}
.输入组输入{
字体系列：“Roboto”，无衬线；
背景：透明；
边界：无；
盒影：无！重要；
字体大小：16px；
填充：0；
}
.不活跃{
宽度：36px；
边界半径：18px；
背景：透明；
盒影：无；
}
.inactive.input组加载项：非（：第一个子项）{
不透明度：0；
}
.行{
边缘顶部：1米；
}
.隐藏{
显示：无；
}

搜索输入
标题
搜索
清楚的
用相对位置将标签和输入包装在一个div中，并使用jquery隐藏标题


$（'.opener'）。单击（函数（）{
$（this）.parent（'.search'）.toggleClass（'inactive'）.find（'input'）.focus（）；
$（this）.parent（'.search'）。同胞（'label'）。toggleClass（'hide'）；
});
.row{
边框：1px纯红；
}
.查册表格{
位置：相对位置；
}
.搜索表格.标题{
字体大小：16px；
字体大小：粗体；
位置：绝对位置；
利润率：6px0；
}
.输入组{
显示器：flex；
高度：36px；
宽度：100%；
溢出：隐藏；
填充：0；
/*背景色：rgba（100100100.1）*/
光标：指针；
/*边界半径：2px*/
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
/*盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）*/
}
.输入组：活动，
.输入组：悬停{
/*背景色：rgba（100100100.1）*/
}
.input-group.CENTED{
保证金：0自动；
}
.input group.input group插件{
证明内容：中心；
宽度：36px；
背景：透明；
边界：无；
显示器：flex；
文本对齐：居中；
过渡：所有0.3立方贝塞尔（0.25,0.8,0.25,1）；
}
.input group.input group addon i{
高度：24px；
宽度：24px；
自对准：居中；
颜色：#777；
}
.输入组输入{
字体系列：“Roboto”，无衬线；
背景：透明；
边界：无；
盒影：无！重要；
字体大小：16px；
填充：0；
}
.不活跃{
宽度：36px；
边界半径：18px；
背景：透明；
盒影：无；
}
.inactive.input组加载项：非（：第一个子项）{
不透明度：0；
}
.行{
边缘顶部：1米；
}

搜索输入
标题
搜索
清楚的
ok问题不清楚是否要隐藏整个块。你提到了公司
$("p").hide();