Javascript 如果一个元素处于活动状态，则不显示另一个元素

我正在从事AngularJS项目。这是一个商店，有一个搜索栏和个人资料，购物车图标附近。

当我单击搜索栏时，它会向右延伸并覆盖右图标。当它发生时，购物车中的物品数量仍然可见

当搜索栏处于“活动”状态时，我需要使cart元素中的项目数消失。你能给我一些建议吗？我读过关于

haseElement（）

的文章，但在这里它似乎不是一个解决方案

守则：

HTML

对于

ch购物车柜台

，我会使用类似

ng if

的东西。如果

#ch搜索框wrap:active

则不显示。如果未激活，则显示

---

谢谢大家!

我不确定这只能通过css来完成。不管怎样，如果输入和图标的代码也显示出来了，可以吗？或者，更好的做法是，使用代码片段、jsbin或其他方法创建一个工作示例。让输入元素组件在展开时向某个父元素添加数据属性。然后使用css隐藏数字阳台？如果或ng隐藏/ng显示应该可以使用

 <div id="ch-shopping-cart-icon-container" class="ch-shopping-cart">
    <div class="ch-shopping-cart-icon" role="button" aria-label="Shopping Cart">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 36 36"><path 
      d="..."/>
      </svg>
    </div>
    <div class="ch-shopping-cart-counter"></div>
 </div>

 <div id="ch-search-box-wrap">
   
   <here injects the search bar component>

 </div>

@media (min-width: 768px) {
        #ch-search-box-wrap:active,
        #ch-search-box-wrap:focus-within {
          padding-right: 0;
          z-index: 9999;
          right: -10px;
        }
      }
      #ch-search-box-wrap {
        position: absolute;
        z-index: 999;
        height: 56px;
        width: 100%;
        margin: auto;
        display: block;
        max-width: 750px;
        padding-right: 95px;
        right: 0;
        transition: .2s;
      }