javascript - 当具有相同的类集时，如何使 div 隐藏？

Question

我有两组 div 容器，其输入标签具有相同的类。 唯一的区别是，当每个单击的输入框时，相应的父 div 都会添加“frame-focus”类。我想要的是，如果单击输入并且存在框架焦点类，则隐藏具有焦点类存在的“面板集”类的 div。

请检查下面我的 div 容器。请告知如何进行此操作 例如:

<!--- here is 1st div container which input box is selected-->
    <div class="block">
    <div class="frame frame-focus">
    <input name="set1">
    <div class="panel-set"></div>
    </div>
    </div>

<!-- here is 2nd div -->
    <div class="block">
    <div class="frame">
    <input name="set1">
    <div class="panel-set"></div>
    </div>
    </div>

Answer 1

使用子选择器或 direct child selector隐藏 .panel-set(它是 .frame-focus 的子级):

.frame-focus > .panel-set {
  display: none;
}

<!--- here is 1st div container which input box is selected-->
<div class="block">
  <div class="frame frame-focus">
    <input name="set1">
    <div class="panel-set">1</div>
  </div>
</div>

<!-- here is 2nd div -->
<div class="block">
  <div class="frame">
    <input name="set1">
    <div class="panel-set">2</div>
  </div>
</div>